Autocomplete: allow "falsely" input values (#2154)

* fix: allow autocomplete input value to be falsely * chore: added changeset * fixes linting error Co-authored-by: Erik Hughes <erik.hughes@outlook.com>
primer · Jun 28, 2022 · 96ad635 · 96ad635
1 parent ce45de3
commit 96ad635
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/.changeset/cold-bottles-attend.md b/.changeset/cold-bottles-attend.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Allow "falsely/empty" Autocomplete.Input values
diff --git a/src/Autocomplete/AutocompleteInput.tsx b/src/Autocomplete/AutocompleteInput.tsx
@@ -146,9 +146,7 @@ const AutocompleteInput = React.forwardRef(
     }, [autocompleteSuggestion, inputValue, inputRef, isMenuDirectlyActivated])
 
     useEffect(() => {
-      if (value) {
-        setInputValue(value.toString())
-      }
+      setInputValue(typeof value !== 'undefined' ? value.toString() : '')
     }, [value, setInputValue])
 
     return (

diff --git a/src/__tests__/Autocomplete.test.tsx b/src/__tests__/Autocomplete.test.tsx
@@ -321,6 +321,14 @@ describe('Autocomplete', () => {
       inputNode && userEvent.type(inputNode, '{esc}')
       expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true')
     })
+
+    it('allows the value to be 0', () => {
+      const {getByDisplayValue} = HTMLRender(
+        <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: []}} inputProps={{value: 0}} />
+      )
+
+      expect(getByDisplayValue('0')).toBeDefined()
+    })
   })
 
   describe('Autocomplete.Menu', () => {