List: Add support for directSelection

assets/src/components/field/list/List.stories.tsx

@@ -39,3 +39,9 @@ export const WithVisibility: Story = {
     useVisibility: true,
   }
 }
+
+export const DirectSelection: Story = {
+  args: {
+    directSelection: true,
+  }
+}

assets/src/components/field/list/List.tsx

@@ -16,6 +16,8 @@ import {
 
 const List = props => {
 
+  const directSelection = props?.directSelection ?? false
+
   const emptyItem = { 
     value: '', 
     _canDelete: true ,
@@ -38,7 +40,7 @@ const List = props => {
     descriptionProps 
   } = useField(props)
 
-  const addSelectedItem = () => {
+  const addItem = selected => {
     setItems([ 
       ...items, 
       { 
@@ -127,16 +129,19 @@ const List = props => {
             multiple={ false }
             onChange={ item => {
               if( ! item ) return;
-              setSelected( item )
-            }}
+              directSelection
+                ? addItem( item )
+                : setSelected( item )
+            } }
           />
-          <Button 
-            type="action" 
-            onPress={ addSelectedItem } 
-            isDisabled={ selected === '' }
-          >
-            Add
-          </Button>
+          { ! directSelection &&
+            <Button
+              type="action"
+              onPress={ () => addItem( selected ) }
+              isDisabled={ selected === '' }
+            >
+              Add
+            </Button> }
         </div>
       </div>
       { props.description &&

fields/format.php

@@ -85,6 +85,7 @@
       break;
 
     case 'list':
+      $args = $fields->format_value($args, 'direct_selection', 'directSelection');
       $args = $fields->format_value($args, 'use_visibility', 'useVisibility');
       // Fallthrough
     case 'combo_box':

package.json

@@ -99,6 +99,7 @@
     "babel-plugin-transform-import-meta": "^2.3.3",
     "chokidar-cli": "^3.0.0",
     "concurrently": "^9.1.2",
+    "css.escape": "^1.5.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prop-types": "^15.8.1",

tests/jest/cases/components/controls/List.test.tsx

@@ -102,6 +102,62 @@ describe('List component', () => {
     expect(document.getElementsByClassName(`tf-list-box-option-disabled`).length).toEqual(1)
   })
 
+  test.each([
+    { directSelection: undefined, hasAddButton: true },
+    { directSelection: false,     hasAddButton: true },
+    { directSelection: true,      hasAddButton: false },
+  ])('renders add button according to directSelection (%p)', ({ directSelection, hasAddButton }) => {
+
+    const { container } = render(
+      fields.render({
+        type    : 'list',
+        label   : `Label for list`,
+        choices : {
+          test1 : 'Test1',
+          test2 : 'Test2',
+          test3 : 'Test3'
+        },
+        ...( directSelection !== undefined ? { directSelection } : {} )
+      }
+    ))
+
+    hasAddButton
+      ? expect(within(container).getByText('Add')).toBeTruthy()
+      : expect(within(container).queryByText('Add')).toBe(null)
+  })
+
+  it('adds item on selection when directSelection is enabled', async () => {
+
+    const user = userEvent.setup()
+    const { container } = render(
+      fields.render({
+        type            : 'list',
+        label           : `Label for list`,
+        directSelection : true,
+        choices : {
+          test1 : 'Test1',
+          test2 : 'Test2',
+          test3 : 'Test3'
+        }
+      }
+    ))
+
+    let items = container.getElementsByClassName(`tf-list-item`)
+    expect(items.length).toEqual(0)
+
+    await user.click(within(container).getByText('▼'))
+    await user.click(within(document).getByText('Test2'))
+
+    items = container.getElementsByClassName(`tf-list-item`)
+    expect(items.length).toEqual(1)
+    expect(items[0].textContent).toContain('Test2')
+
+    const input = container.querySelector('input[type=hidden]')
+    expect(JSON.parse(input.value)).toEqual([
+      { value: 'test2', _canDelete: true, _enabled: true }
+    ])
+  })
+
   it('supports visibility button', async () => {
 
     const user = userEvent.setup()
@@ -140,5 +196,4 @@ describe('List component', () => {
 
     expect(visibilityButtons[1].style.opacity).not.toEqual('0.5')
   })
-
 })

tests/jest/jest.config.js

@@ -8,6 +8,7 @@ export default {
   roots: ['<rootDir>/cases'],
   setupFiles: [
     './setup/config.ts',
+    './setup/css.ts',
     './setup/range.ts',
     './setup/timeout.ts'
   ],

tests/jest/setup/css.ts

@@ -0,0 +1,9 @@
+/**
+ * jsdom doesn't implement window.CSS, used by react-aria selection (CSS.escape)
+ *
+ * @see https://github.com/jsdom/jsdom/issues/3991
+ */
+import 'css.escape'
+
+// @ts-ignore
+globalThis.CSS.supports ??= () => false

tests/phpunit/cases/fields/format.php

@@ -174,7 +174,8 @@ public function _test_format_args_type_attributes_data() {
         'search_url' => 'searchUrl',
         'ajax_action' => 'ajaxAction',
         'map_results' => 'mapResults',
-        'use_visibility' => 'useVisibility'
+        'use_visibility' => 'useVisibility',
+        'direct_selection' => 'directSelection'
       ]],
       'wysiwyg' =>  ['wysiwyg', [
         'raw_view' => 'rawView'