Fix: Unable to custom reorder repeatable date/time values (#7471)

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

@@ -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":"4008c948bd3dcc7d352f"}
+{"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":"1c787679135b0a07425a"}

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

@@ -215,7 +215,7 @@ const RepeatableFieldList = ( {
 											showTooltip
 										/>
 									) : null }
-									key={ `${ fieldConfig.name }-${ index }` }
+									key={ `${ fieldConfig.name }-${ JSON.stringify( valueItem ) }-${ index }` }
 								/>
 							);
 						} ) }

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

@@ -56,6 +56,13 @@ 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/fields/datetime/index.js

@@ -250,6 +250,20 @@ 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/number-field/index.js

@@ -62,6 +62,13 @@ 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,