Add Multi-Value Text Prop Support (UI)
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3573096. -->
Reported by: [vipin.mittal18](https://www.drupal.org/user/319716)
Related to !590
>>>
<p>This work item involves implementing UI support for multi-value text fields, including list display, add/remove functionality, and drag-and-drop reordering.</p>
<h3>Approach</h3>
<ol>
<li>List Display & "Add new" Button
<ul>
<li>The Text Field renders as a list of existing values (if any), each value shown as a distinct list item.</li>
<li>When the field supports multiple values and the current number of values is less than the configured max cardinality, an “+ Add new” button is visible and enabled.</li>
<li>When the current number of values is equal to the configured max cardinality, the “+ Add new” button is not visible</li>
<li>When the field is configured with “unlimited” values, the “+ Add new” button is never disabled based on cardinality.</li>
<li>Clicking “+ Add new” will open an empty text panel and user will be able to add text value.</li>
</ul>
</li>
<li>Opening the Edit Panel & Data Sync<br>
<strong>This is out of scope until #3546869 merges, as this portion will be addressed automatically.<br>
</strong>
<ul>
<li>Clicking on an existing list item opens the Edit Panel for that specific value.</li>
<li>The Edit Panel displays the current value exactly as stored.</li>
<li>Any change confirmed in the Edit Panel is immediately reflected in:</li>
<ul>
<li>The list display in the UI, and</li>
<li><del>The underlying data model (two-way data binding).</del></li>
</ul>
<li>If the user cancels editing, no changes are applied to the list or the data model.</li>
</ul>
</li>
<li>Item Removal Logic (Required vs Optional)
<ul>
<li>For optional Text Fields:
<ul>
<li>Each list item has a visible control to remove/delete the item.</li>
<li>Clicking “remove” deletes the value from both the UI list and the underlying data model.</li>
</ul>
</li>
<li>For required Text Fields:
<ul>
<li>The user is prevented from removing the last remaining value.</li>
<li>If only one value exists and the field is required:
<ul>
<li>The remove rendered in a disabled state</li>
</ul>
</li>
<li>Attempting to remove items must never leave the field in an invalid state with respect to required/optional configuration.</li>
</ul>
</li>
</ul>
</li>
<li>Drag-and-Drop Reordering
<ul>
<li>When the field is configured to allow multiple values, users can reorder values using drag-and-drop.</li>
<li>The drag handle is clearly visible and accessible for each list item.</li>
<li>After a drag-and-drop operation:
<ul>
<li>The new order is reflected immediately in the UI.</li>
<li>The underlying data model is updated to match the new order.</li>
</ul>
</li>
<li>On page refresh/reload, the list is rendered in the last saved order.</li>
</ul>
</li>
</ol>
<h3>Design</h3>
<p><img src="https://www.drupal.org/files/issues/2026-02-20/text%20field%20UI.png" alt="textfeldui"></p>
issue