Repeatable Fields: Drag and Drop + Input Focus

useEffect value-sync approach in repeatable DateTime, Currency, Text, and
Number fields have been replaced with useRef.

A previous fix for drag-and-drop reorder (including value in the React key)
caused repeatable text fields to lose focus on every keystroke. Removing the
value from the key fixed focus but regressed drag-and-drop for date/currency/number
fields that maintain internal state.

This replaces both approaches with useRef for persistent field IDs which associate
with items during reorder. React tracks component instances without
remounting, so text fields keep focus and fields keep their order.

Author: pdclark

ui/js/blocks/pods-blocks-api.min.asset.json

@@ -1 +1 @@
-{"dependencies":["lodash","react","react-dom","wp-api-fetch","wp-autop","wp-block-editor","wp-blocks","wp-components","wp-compose","wp-date","wp-element","wp-i18n","wp-keycodes","wp-server-side-render","wp-url"],"version":"4748509d03f7df68d202"}
+{"dependencies":["lodash","react","react-dom","wp-api-fetch","wp-autop","wp-block-editor","wp-blocks","wp-components","wp-compose","wp-date","wp-element","wp-i18n","wp-keycodes","wp-server-side-render","wp-url"],"version":"d22b52bd9ea7ada14900"}

ui/js/blocks/pods-blocks-api.min.js

@@ -1 +1 @@
-{"dependencies":["lodash","moment","react","react-dom","react-jsx-runtime","regenerator-runtime","wp-api-fetch","wp-autop","wp-components","wp-compose","wp-data","wp-element","wp-hooks","wp-i18n","wp-keycodes","wp-plugins","wp-primitives","wp-url"],"version":"5ddb11ac8c48641bcb2d"}
+{"dependencies":["lodash","moment","react","react-dom","react-jsx-runtime","regenerator-runtime","wp-api-fetch","wp-autop","wp-components","wp-compose","wp-data","wp-element","wp-hooks","wp-i18n","wp-keycodes","wp-plugins","wp-primitives","wp-url"],"version":"8ed9c3584aee2b81285b"}

ui/js/dfv/pods-dfv.min.asset.json

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import {
 	DndContext,
@@ -58,6 +58,22 @@ const RepeatableFieldList = ( {
 	setFullValue,
 	setHasBlurred,
 } ) => {
+	// Stable unique IDs for React keys. These move with items during
+	// drag-and-drop reorder so React correctly tracks component instances,
+	// preventing both focus loss (text fields) and stale internal state
+	// (datetime/currency/number fields).
+	const nextIdRef = useRef( valuesArray.length );
+	const itemIdsRef = useRef( valuesArray.map( ( _, i ) => i ) );
+
+	// Ensure IDs array stays in sync if valuesArray length changes externally.
+	if ( itemIdsRef.current.length < valuesArray.length ) {
+		while ( itemIdsRef.current.length < valuesArray.length ) {
+			itemIdsRef.current.push( nextIdRef.current++ );
+		}
+	} else if ( itemIdsRef.current.length > valuesArray.length ) {
+		itemIdsRef.current = itemIdsRef.current.slice( 0, valuesArray.length );
+	}
+
 	// Helper functions for setting, moving, adding, and deleting the value
 	// or subvalues.
 	const createSetValueAtIndex = ( index ) => ( newValue ) => {
@@ -68,6 +84,11 @@ const RepeatableFieldList = ( {
 	};
 
 	const deleteValueAtIndex = ( index ) => {
+		itemIdsRef.current = [
+			...itemIdsRef.current.slice( 0, index ),
+			...itemIdsRef.current.slice( index + 1 ),
+		];
+
 		const newValues = [
 			...(
 				valuesArray || []
@@ -81,6 +102,8 @@ const RepeatableFieldList = ( {
 	};
 
 	const addValue = () => {
+		itemIdsRef.current = [ ...itemIdsRef.current, nextIdRef.current++ ];
+
 		const newValues = [
 			...valuesArray,
 			// @todo does an empty string always work?
@@ -98,6 +121,12 @@ const RepeatableFieldList = ( {
 			return;
 		}
 
+		const newIds = [ ...itemIdsRef.current ];
+		const tempId = newIds[ secondIndex ];
+		newIds[ secondIndex ] = newIds[ firstIndex ];
+		newIds[ firstIndex ] = tempId;
+		itemIdsRef.current = newIds;
+
 		const newValues = [ ...valuesArray ];
 		const tempValue = newValues[ secondIndex ];
 
@@ -128,6 +157,8 @@ const RepeatableFieldList = ( {
 		const oldIndex = parseInt( active.id, 10 );
 		const newIndex = parseInt( over.id, 10 );
 
+		itemIdsRef.current = arrayMove( itemIdsRef.current, oldIndex, newIndex );
+
 		setFullValue(
 			arrayMove( valuesArray, oldIndex, newIndex ),
 		);
@@ -215,7 +246,7 @@ const RepeatableFieldList = ( {
 											showTooltip
 										/>
 									) : null }
-									key={ `${ fieldConfig.name }-${ JSON.stringify( valueItem ) }-${ index }` }
+									key={ `${ fieldConfig.name }-${ itemIdsRef.current[ index ] }` }
 								/>
 							);
 						} ) }

ui/js/dfv/pods-dfv.min.js

@@ -56,13 +56,6 @@ const Currency = ( {
 		addValidationRules( [ numberValidationRule ] );
 	}, [] );
 
-	// Sync local state with external value changes (e.g., after drag-and-drop reorder).
-	useEffect( () => {
-		setFormattedValue(
-			formatNumberWithPodsFormat( value, format, false, decimalHandling, decimalMaxLength )
-		);
-	}, [ value ] );
-
 	const handleChange = ( event ) => {
 		if ( isSlider ) {
 			// The "range" (slider) input doesn't support the readonly attribute,

ui/js/dfv/src/components/field-wrapper/repeatable-field-list.js

@@ -250,20 +250,6 @@ const DateTime = ( {
 		},
 	);
 
-	// Sync local state with external value changes (e.g., after drag-and-drop reorder).
-	useEffect( () => {
-		const isCurrentValueEmpty = [ '0000-00-00', '0000-00-00 00:00:00', '' ].includes( value );
-
-		if ( isCurrentValueEmpty ) {
-			setLocalStringValue( '' );
-			setLocalMomentValue( '' );
-		} else {
-			const momentParsed = moment( value, [ getDBFormat(), getFullFormat() ] );
-			setLocalStringValue( formatMomentObject( momentParsed, value ) );
-			setLocalMomentValue( momentParsed );
-		}
-	}, [ value ] );
-
 	const handleChange = ( newValue ) => {
 		let momentObject = newValue;
 

ui/js/dfv/src/fields/currency/index.js

@@ -62,13 +62,6 @@ const NumberField = ( {
 		addValidationRules( [ numberValidationRule ] );
 	}, [] );
 
-	// Sync local state with external value changes (e.g., after drag-and-drop reorder).
-	useEffect( () => {
-		setFormattedValue(
-			formatNumberWithPodsFormat( value, format, softFormat, decimalHandlingForNumber, decimalMaxLength )
-		);
-	}, [ value ] );
-
 	const handleChange = ( event ) => {
 		if ( isSlider ) {
 			// The "range" (slider) input doesn't support the readonly attribute,