feat: clear input field on blur if the user has not selected any option

equinor · Jan 5, 2024 · c4f1442 · c4f1442
1 parent cd3de72
commit c4f1442
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 0 deletions.
diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.test.tsx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.test.tsx
@@ -247,6 +247,19 @@ describe('Autocomplete', () => {
     expect(within(filteredOptions[0]).getByText('Three')).toBeDefined()
   })
 
+  it('Clears the input text on blur when no option is selected', async () => {
+    render(<Autocomplete disablePortal options={items} label={labelText} />)
+    const labeledNodes = await screen.findAllByLabelText(labelText)
+    const input = labeledNodes[0]
+
+    fireEvent.change(input, {
+      target: { value: 'ree' },
+    })
+
+    fireEvent.blur(input)
+    expect(input).toHaveValue('')
+  })
+
   it('Second option is first when first option is disabled', async () => {
     render(
       <Autocomplete

diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
@@ -597,6 +597,7 @@ function AutocompleteInner<T>(
     getItemProps,
     inputValue,
     reset: resetCombobox,
+    setInputValue,
   } = useCombobox(comboBoxProps)
 
   useEffect(() => {
@@ -731,6 +732,16 @@ function AutocompleteInner<T>(
       disabled,
       onChange: (e: ChangeEvent<HTMLInputElement>) =>
         setTypedInputValue(e?.currentTarget?.value),
+      onBlur: () => {
+        if (multiple) return
+        if (selectedItems[0]) {
+          const inputValue = getLabel(selectedItems[0])
+          setTypedInputValue(inputValue)
+          setInputValue(inputValue)
+          return
+        }
+        clear()
+      },
     }),
   )
   const consolidatedEvents = mergeEventsFromRight(other, inputProps)