Summary

Fixes the inability to reorder repeatable date/time field values via drag-and-drop in the admin UI.

Closes #7471

🔍 Root Cause Analysis

When users drag-and-drop to reorder repeatable field values, the following chain of events occurs:

1. handleDragEnd() in RepeatableFieldList calls arrayMove() to reorder the valuesArray
2. setFullValue() updates the parent state, triggering a re-render
3. Each SubfieldWrapper receives a new value prop at its position

Why It Didn't Work for Date/Time Fields

Problem 1: Stale Internal State

Fields like DateTime, Currency, and NumberField maintain internal React state for formatted display values:

// DateTime component - internal state initialized once
const [ localStringValue, setLocalStringValue ] = useState(
    () => formatMomentObject(moment(value, [...]), value)
);
const [ localMomentValue, setLocalMomentValue ] = useState(
    () => formatMomentObject(moment(value, [...]), value)
);

The useState initializer function only runs on first render. When the value prop changed after a drag-drop reorder, the internal state remained stale because there was no mechanism to sync it.

Problem 2: Position-Based React Keys

// Old key - based only on position index
key={ `${ fieldConfig.name }-${ index }` }

When items reorder:

• Before: ["2024-01-01", "2024-02-02"] → Keys: ["field-0", "field-1"]
• After swap: ["2024-02-02", "2024-01-01"] → Keys: ["field-0", "field-1"] (unchanged!)

React sees the same keys and reuses the same component instances, just passing new props. For simple text inputs this works fine (they directly use value prop), but for DateTime the stale internal state causes the display to "snap back" to old values.

✅ Solution

Fix 1: Added useEffect to Sync State with Props

Before:

// No sync mechanism - internal state becomes stale on prop changes
const [ localStringValue, setLocalStringValue ] = useState(() => {...});
const [ localMomentValue, setLocalMomentValue ] = useState(() => {...});

After:

const [ localStringValue, setLocalStringValue ] = useState(() => {...});
const [ localMomentValue, setLocalMomentValue ] = useState(() => {...});

// NEW: 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 ] );

Fix 2: Changed React Key to Include Value

Before:

key={ `${ fieldConfig.name }-${ index }` }

After:

key={ `${ fieldConfig.name }-${ JSON.stringify( valueItem ) }-${ index }` }

By including the value in the key, React treats components as different when their values change positions, forcing a proper remount with fresh state initialization.

📁 Files Changed

🧪 Testing

Automated

• All 512 Jest tests pass ✅
• RepeatableFieldList tests pass ✅
• DateTime, Currency, NumberField tests pass ✅

Manual Testing Steps

1. Create a Pod with a repeatable Date/Time field
2. Add 3+ date values
3. Drag and drop to reorder
4. ✅ Verify values stay in the new order (no snapping back)
5. Save and reload to confirm persistence

Also tested with repeatable Currency and Number fields.

📦 Test Build

pods-fix-7471.zip

Screen recording

https://videos.faisalahammad.com/recordings/c8bJrtegcX4p7bWJBOfH