wip

Author: kapantzak

src/components/input/autocomplete/index.js

@@ -2,6 +2,7 @@ import React, { forwardRef, useCallback, useState } from "react"
 import { StyledOptionsContainer } from "./styled"
 import Dropdown from "@/components/drops/menu/dropdown"
 import DropdownItem from "@/components/drops/menu/dropdownItem"
+import useOutsideClick from "@/hooks/useOutsideClick"
 import useAutocomplete from "./useAutocomplete"
 
 const Autocomplete = forwardRef(({ value, autocompleteProps, onInputChange, onEsc }, ref) => {
@@ -20,12 +21,13 @@ const Autocomplete = forwardRef(({ value, autocompleteProps, onInputChange, onEs
       } else if (e.code == "Enter") {
         onItemClick(filteredSuggestions[activeIndex]?.value)
         onEsc()
-        close()
       }
     },
     [activeIndex, filteredSuggestions, onItemClick, onEsc, close]
   )
 
+  useOutsideClick(ref, close, ref?.current)
+
   return (
     autocompleteOpen && (
       <StyledOptionsContainer>

src/components/input/autocomplete/useAutocomplete.js

@@ -1,30 +1,39 @@
-import { useCallback } from "react"
-import { useState, useEffect } from "react"
+import { useState, useEffect, useMemo, useCallback } from "react"
 
 const useAutocomplete = ({ value, onInputChange, autocompleteProps = {} }) => {
   const [autocompleteOpen, setAutocompleteOpen] = useState()
   const { suggestions = [] } = autocompleteProps || {}
-  const [filteredSuggestions, setFilteredSuggestions] = useState(suggestions)
+  const items = useMemo(
+    () =>
+      suggestions.map(suggestion => ({
+        value: suggestion,
+        label: suggestion,
+      })),
+    [suggestions]
+  )
+  const [filteredSuggestions, setFilteredSuggestions] = useState(items)
 
   const close = useCallback(() => setAutocompleteOpen(false), [setAutocompleteOpen])
 
   const onItemClick = useCallback(
     val => {
       if (typeof onInputChange == "function") {
         onInputChange({ target: { value: val } })
-        close()
+        setTimeout(() => close(), 100)
       }
     },
     [close, onInputChange]
   )
 
   useEffect(() => {
-    if (suggestions.length && !!value) {
-      const filtered = suggestions.filter(({ label }) => label.includes(value))
+    if (items.length && !!value) {
+      const filtered = items.filter(({ label }) =>
+        label.toLowerCase().includes(value.toLowerCase())
+      )
       setFilteredSuggestions(filtered)
       setAutocompleteOpen(!!filtered.length)
     }
-  }, [value, suggestions, setAutocompleteOpen, setFilteredSuggestions])
+  }, [value, items, setAutocompleteOpen, setFilteredSuggestions])
 
   return { autocompleteOpen, close, filteredSuggestions, onItemClick }
 }

src/components/input/input.stories.js

@@ -16,7 +16,7 @@ export const Basic = args => <TextInput {...args} />
 export const WithAutocomplete = () => {
   const [value, setValue] = useState("")
   const autocompleteProps = {
-    suggestions: Array.from(Array(10000).keys()).map(i => ({ value: i, label: `Label ${i}` })),
+    suggestions: Array.from(Array(10000).keys()).map(i => `Label ${i}`),
   }
 
   const onChange = e => {