feat(Forms): add async Autocomplete support to Field.Selection (#4664)

Replaces #4657

Author: tujoworker

packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx

@@ -2951,6 +2951,39 @@ describe('Autocomplete component', () => {
     }
   })
 
+  it('should support "preventSelection"', async () => {
+    render(<Autocomplete data={mockData} prevent_selection />)
+
+    const input = document.querySelector('input')
+    await userEvent.type(input, 'aa')
+
+    expect(input).toHaveValue('aa')
+
+    {
+      const options = document.querySelectorAll('[role="option"]')
+      expect(options[0]).toHaveTextContent('AA c')
+      expect(options[1]).toHaveTextContent('Vis alt')
+
+      await userEvent.click(options[0])
+    }
+
+    expect(
+      document.querySelector('.dnb-drawer-list__option--selected')
+    ).not.toBeInTheDocument()
+
+    await userEvent.click(input)
+
+    expect(
+      document.querySelector('.dnb-drawer-list__option--selected')
+    ).not.toBeInTheDocument()
+
+    {
+      const options = document.querySelectorAll('[role="option"]')
+      expect(options[0]).toHaveTextContent('AA c')
+      expect(options[1]).toHaveTextContent('Vis alt')
+    }
+  })
+
   describe('input blur', () => {
     const mainElement = () => document.querySelector('.dnb-autocomplete')
     const inputElement = () =>

packages/dnb-eufemia/src/extensions/forms/Field/Selection/Selection.tsx

@@ -137,6 +137,7 @@ function Selection(props: Props) {
     data,
     dataPath,
     children,
+    additionalArgs,
 
     // - Autocomplete and Dropdown specific props
     autocompleteProps,
@@ -149,13 +150,14 @@ function Selection(props: Props) {
     dataList = getValueByPath(dataPath)
   }
 
-  const handleDropdownChange = useCallback(
-    ({ data }) => {
-      const selectedKey = data?.selectedKey
+  const handleDrawerListChange = useCallback(
+    ({ data, value }) => {
+      const selectedKey = data?.selectedKey ?? value
       handleChange?.(
         !selectedKey || selectedKey === clearValue
           ? emptyValue
-          : selectedKey
+          : selectedKey,
+        { data }
       )
     },
     [handleChange, emptyValue, clearValue]
@@ -200,6 +202,20 @@ function Selection(props: Props) {
     ...pickSpacingProps(props),
   }
 
+  const onType = props?.autocompleteProps?.onType
+  const onTypeAutocompleteHandler = useCallback(
+    (event) => {
+      const { value } = event
+      if (typeof onType === 'function') {
+        onType(value === undefined ? emptyValue : value, {
+          ...event,
+          ...additionalArgs,
+        })
+      }
+    },
+    [additionalArgs, emptyValue, onType]
+  )
+
   switch (variant) {
     case 'radio':
     case 'button': {
@@ -270,7 +286,7 @@ function Selection(props: Props) {
         ...htmlAttributes,
         data,
         size,
-        on_change: handleDropdownChange,
+        on_change: handleDrawerListChange,
         on_show: handleShow,
         on_hide: handleHide,
         stretch: true,
@@ -291,9 +307,20 @@ function Selection(props: Props) {
               {...sharedProps}
               {...(autocompleteProps
                 ? (convertCamelCaseProps(
-                    autocompleteProps
+                    Object.freeze(autocompleteProps)
                   ) as AutocompleteAllProps)
                 : null)}
+              value={
+                autocompleteProps?.preventSelection ? undefined : value
+              }
+              on_type={onTypeAutocompleteHandler}
+              data={
+                !props.data &&
+                !props.dataPath &&
+                autocompleteProps?.mode === 'async'
+                  ? undefined
+                  : data
+              }
             />
           ) : (
             <Dropdown

packages/dnb-eufemia/src/extensions/forms/Field/Selection/__tests__/Selection.test.tsx

@@ -1603,6 +1603,136 @@ describe('variants', () => {
       ).toBe(document.querySelector('.dnb-tooltip__content').id)
     })
 
+    it('should support "onType"', async () => {
+      const onType = jest.fn()
+
+      render(
+        <Field.Selection
+          variant="autocomplete"
+          autocompleteProps={{
+            onType,
+          }}
+        >
+          <Field.Option value="foo">Foo</Field.Option>
+          <Field.Option value="bar">Bar</Field.Option>
+        </Field.Selection>
+      )
+
+      const input = document.querySelector('input')
+      await userEvent.type(input, 'foo')
+
+      expect(onType).toHaveBeenCalledTimes(3)
+      expect(onType).toHaveBeenLastCalledWith(
+        'foo',
+        expect.objectContaining({
+          updateData: expect.any(Function),
+          dataContext: expect.any(Object),
+        })
+      )
+    })
+
+    it('should support "preventSelection"', async () => {
+      const onChange = jest.fn()
+
+      render(
+        <Field.Selection
+          variant="autocomplete"
+          autocompleteProps={{
+            preventSelection: true,
+          }}
+          onChange={onChange}
+        >
+          <Field.Option value="foo">Foo</Field.Option>
+          <Field.Option value="bar">Bar</Field.Option>
+        </Field.Selection>
+      )
+
+      const input = document.querySelector('input')
+      await userEvent.type(input, 'foo')
+
+      expect(input).toHaveValue('foo')
+
+      {
+        const options = document.querySelectorAll('[role="option"]')
+        expect(options[0]).toHaveTextContent('Foo')
+        expect(options[1]).toHaveTextContent('Vis alt')
+
+        await userEvent.click(options[0])
+      }
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+      expect(onChange).toHaveBeenLastCalledWith('foo', expect.anything())
+      expect(
+        document.querySelector('.dnb-drawer-list__option--selected')
+      ).not.toBeInTheDocument()
+      expect(input).toHaveValue('foo')
+
+      await userEvent.click(input)
+
+      expect(
+        document.querySelector('.dnb-drawer-list__option--selected')
+      ).not.toBeInTheDocument()
+      expect(input).toHaveValue('foo')
+
+      {
+        const options = document.querySelectorAll('[role="option"]')
+        expect(options[0]).toHaveTextContent('Foo')
+        expect(options[1]).toHaveTextContent('Vis alt')
+      }
+
+      expect(onChange).toHaveBeenCalledTimes(1)
+    })
+
+    describe('mode="async"', () => {
+      it('should open DrawerList when focused and data is set with updateData', async () => {
+        const onType = jest.fn((value, { updateData }) => {
+          updateData([
+            {
+              selectedKey: 'foo',
+              content: 'Foo',
+            },
+            {
+              selectedKey: 'bar',
+              content: 'Bar',
+            },
+          ])
+        })
+
+        render(
+          <Field.Selection
+            variant="autocomplete"
+            autocompleteProps={{
+              mode: 'async',
+              onType,
+            }}
+          />
+        )
+
+        const input = document.querySelector('input')
+        await userEvent.type(input, 'foo')
+
+        {
+          const options = document.querySelectorAll('[role="option"]')
+          expect(options[0]).toHaveTextContent('Foo')
+          expect(options[1]).toHaveTextContent('Vis alt')
+          expect(input).toHaveValue('foo')
+
+          await userEvent.click(options[0])
+        }
+
+        expect(input).toHaveValue('Foo')
+
+        await userEvent.click(input)
+
+        {
+          const options = document.querySelectorAll('[role="option"]')
+          expect(options[0]).toHaveTextContent('Foo')
+          expect(options[1]).toHaveTextContent('Bar')
+          expect(input).toHaveValue('Foo')
+        }
+      })
+    })
+
     it('should disable autocomplete', () => {
       render(
         <Field.Selection variant="autocomplete" disabled>