fix(Autocomplete): make clear button work with enter key (#2901)

Fixes issue #2185
dnbexperience · Nov 15, 2023 · 30007c4 · 30007c4
1 parent d650c66
commit 30007c4
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 43 deletions.
diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js
@@ -843,6 +843,7 @@ class AutocompleteInstance extends React.PureComponent {
 
   onInputKeyDownHandler = ({ event: e }) => {
     const key = keycode(e)
+
     switch (key) {
       case 'page up':
       case 'page down':
@@ -853,6 +854,43 @@ class AutocompleteInstance extends React.PureComponent {
         e.preventDefault() // has to be there for VO, one the drawer is closed
         break
     }
+
+    switch (key) {
+      case 'up':
+      case 'down':
+        if (!this.context.drawerList.opened) {
+          // e.preventDefault()
+          this.setVisible()
+        }
+
+        break
+
+      case 'esc':
+        this.setState({
+          showAllNextTime: true,
+          _listenForPropChanges: false,
+        })
+
+        break
+
+      case 'enter':
+        e.preventDefault()
+
+        if (!this.context.drawerList.opened && this.hasFilterActive()) {
+          this.ignoreEvents()
+          this.showAll()
+        }
+        if (
+          (!this.hasValidData() || !this.hasSelectedItem()) &&
+          !this.hasActiveItem()
+        ) {
+          this.toggleVisible()
+        } else {
+          this.setVisible()
+        }
+
+        break
+    }
   }
 
   onInputClickHandler = (e) => {
@@ -1012,47 +1050,6 @@ class AutocompleteInstance extends React.PureComponent {
     }
   }
 
-  onShellKeyDownHandler = (e) => {
-    const key = keycode(e)
-
-    switch (key) {
-      case 'up':
-      case 'down':
-        if (!this.context.drawerList.opened) {
-          e.preventDefault()
-          this.setVisible()
-        }
-
-        break
-
-      case 'esc':
-        this.setState({
-          showAllNextTime: true,
-          _listenForPropChanges: false,
-        })
-
-        break
-
-      case 'enter':
-        e.preventDefault()
-
-        if (!this.context.drawerList.opened && this.hasFilterActive()) {
-          this.ignoreEvents()
-          this.showAll()
-        }
-        if (
-          (!this.hasValidData() || !this.hasSelectedItem()) &&
-          !this.hasActiveItem()
-        ) {
-          this.toggleVisible()
-        } else {
-          this.setVisible()
-        }
-
-        break
-    }
-  }
-
   getEventObjects = (key) => {
     const attributes = this.attributes
 
@@ -1836,7 +1833,6 @@ class AutocompleteInstance extends React.PureComponent {
     const shellParams = {
       className: 'dnb-autocomplete__shell dnb-no-focus',
       ref: this._refShell,
-      onKeyDown: this.onShellKeyDownHandler,
     }
 
     const inputParams = {

diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx
@@ -2542,9 +2542,54 @@ describe('Autocomplete component', () => {
     expect(inputElement.value).toEqual('CH (+41)')
   })
 
+  it('shold reset value and open drawer on clear button click', async () => {
+    const on_focus = jest.fn()
+    render(
+      <Autocomplete
+        show_clear_button
+        data={mockData}
+        {...mockProps}
+        on_focus={on_focus}
+      />
+    )
+
+    const inputElement = document.querySelector(
+      '.dnb-input__input'
+    ) as HTMLInputElement
+    const clearElement = () =>
+      document.querySelector('.dnb-input__clear-button')
+
+    // Reset with click
+    {
+      await userEvent.type(inputElement, 'aa')
+
+      expect(inputElement.value).toBe('aa')
+      expect(document.activeElement).toBe(inputElement)
+
+      fireEvent.click(clearElement())
+
+      expect(inputElement.value).toBe('')
+      expect(document.activeElement).toBe(inputElement)
+    }
+
+    // Reset with keyboard
+    {
+      await userEvent.type(inputElement, 'bb')
+
+      expect(inputElement.value).toBe('bb')
+      expect(document.activeElement).toBe(inputElement)
+
+      await userEvent.type(clearElement(), '{Enter}')
+
+      expect(inputElement.value).toBe('')
+      expect(document.activeElement).toBe(inputElement)
+    }
+  })
+
   describe('input blur', () => {
     const mainElement = () => document.querySelector('.dnb-autocomplete')
-    const inputElement = () => document.querySelector('.dnb-input__input')
+    const inputElement = () =>
+      document.querySelector('.dnb-input__input') as HTMLInputElement
     const inputComponent = () => document.querySelector('.dnb-input')
     const listElement = () =>
       document.querySelector('.dnb-autocomplete__list')