Use filtered suggestions

Author: kapantzak

src/components/input/autocomplete/index.js

@@ -6,7 +6,7 @@ import useAutocomplete from "./useAutocomplete"
 
 const Autocomplete = forwardRef(({ value, autocompleteProps, onInputChange, onEsc }, ref) => {
   const [activeIndex, setActiveIndex] = useState(0)
-  const { autocompleteOpen, close, suggestions, onItemClick } = useAutocomplete({
+  const { autocompleteOpen, close, filteredSuggestions, onItemClick } = useAutocomplete({
     value,
     onInputChange,
     autocompleteProps,
@@ -18,20 +18,20 @@ const Autocomplete = forwardRef(({ value, autocompleteProps, onInputChange, onEs
         onEsc()
         close()
       } else if (e.code == "Enter") {
-        onItemClick(suggestions[activeIndex]?.value)
+        onItemClick(filteredSuggestions[activeIndex]?.value)
         onEsc()
         close()
       }
     },
-    [activeIndex, suggestions, onItemClick, onEsc, close]
+    [activeIndex, filteredSuggestions, onItemClick, onEsc, close]
   )
 
   return (
     autocompleteOpen && (
       <StyledOptionsContainer>
         <Dropdown
           ref={ref}
-          items={suggestions}
+          items={filteredSuggestions}
           Item={DropdownItem}
           onItemClick={onItemClick}
           width="100%"

src/components/input/autocomplete/useAutocomplete.js

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react"
 const useAutocomplete = ({ value, onInputChange, autocompleteProps = {} }) => {
   const [autocompleteOpen, setAutocompleteOpen] = useState()
   const { suggestions = [] } = autocompleteProps || {}
+  const [filteredSuggestions, setFilteredSuggestions] = useState(suggestions)
 
   const close = useCallback(() => setAutocompleteOpen(false), [setAutocompleteOpen])
 
@@ -18,12 +19,14 @@ const useAutocomplete = ({ value, onInputChange, autocompleteProps = {} }) => {
   )
 
   useEffect(() => {
-    if (suggestions.length) {
-      setAutocompleteOpen(!!value.length)
+    if (suggestions.length && !!value) {
+      const filtered = suggestions.filter(({ label }) => label.includes(value))
+      setFilteredSuggestions(filtered)
+      setAutocompleteOpen(!!filtered.length)
     }
-  }, [suggestions, value, setAutocompleteOpen])
+  }, [value, suggestions, setAutocompleteOpen, setFilteredSuggestions])
 
-  return { autocompleteOpen, close, suggestions, onItemClick }
+  return { autocompleteOpen, close, filteredSuggestions, onItemClick }
 }
 
 export default useAutocomplete