Fix repeatable text field focus

[pdclark]

Including value of text field in the field ID caused repeating text fields to lose focus as user typed.

Commit removes JSON.stringify( valueItem ) from input key.

Description

Typing in repeatable text fields caused field to lose focus on each keystroke.

The react component was changing input field key with value, causing the field identifier to change as user typed.

Related issue(s)

https://wordpress.org/support/topic/plain-text-repeatable-fields-lose-focus-when-typing/

Testing instructions

Create a repeating text field
Add new
Type in field
Save

Should be able to type more than one character in field and save the value.

The last working version was 3.3.4:

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

Line 218 in f5cd00f

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

This change brings it back to how it was in that version, but it is notable that as I switched between versions, the values displayed in the field appeared to be lost, so unknown if there's any backend change needed or reason the key was changed.

Changelog text for these changes

Fix: Repeatable text field input

PR checklist

• [x ] I have tested my own code to confirm it works as I intended.
• [ x] My code follows the WordPress Coding Standards.
• [x ] My code follows the WordPress Inline Documentation Standards.
• My code includes automated tests for PHP and/or JS (if applicable).

[what-the-diff]

PR Summary

• Updated Version Numbers
  The version numbers in two key files have been updated. This ensures our code remains compatible with the latest advancements, thereby reducing potential crashes or bugs.

• Improved ID Tracking
  Enhancements have been made to how we track IDs during 'drag-and-drop' operations. The use of a 'stable ID' ensures the items being dragged and dropped are consistently rendered. The changes also allow us to more efficiently manage these unique IDs whenever items are added, removed, or reordered.

• Removed Unnecessary Effects
  Redundant elements that synced local states with external value changes post 'drag-and-drop' operations have been removed. This simplifies the code whilst leaving its functionality unchanged.

• Better Component Rendering
  The component rendering process has been improved by updating keys to use stable IDs instead of values. This optimizes the reconciliation process when using React, ensuring more efficient rendering of the visual elements in our application.

[pdclark]

The build files were included in the PR... maybe that's why build failed? The only real change was repeatable-field-list.js

[sc0ttkclark]

The original fix was to resolve problems reordering items. This will take a bit more work to cover both the original fix and resolving the issue with the value focus. Probably need to figure out a better way for the keys.

[pdclark]

#7486

[pdclark]

Both drag & focus should be resolved now

useEffect -> useRef

Video:
https://github.com/user-attachments/assets/ca362b96-b5ca-4723-a30c-25fd9396e73f

[Koda-Pig]

I'm experiencing the same issue with fields losing focus. Commenting to keep track of when this PR gets merged.

[YippeKaye]

I am also still having the issue with fields losing focus.