Use Dropdown to render suggestions

Author: kapantzak

src/components/input/autocomplete/index.js

@@ -1,28 +1,20 @@
 import React from "react"
-import Drop from "@/components/drops/drop"
-import Options from "./options"
+import { StyledOptionsContainer } from "./styled"
+import Dropdown from "@/components/drops/menu/dropdown"
+import DropdownItem from "@/components/drops/menu/dropdownItem"
 import useAutocomplete from "./useAutocomplete"
 
-const Autocomplete = ({ value, autocompleteProps, tagretRef }) => {
-  const { autocompleteOpen, suggestions } = useAutocomplete({ value, autocompleteProps })
+const Autocomplete = ({ value, autocompleteProps, Item = DropdownItem }) => {
+  const { autocompleteOpen, suggestions, onItemClick } = useAutocomplete({
+    value,
+    autocompleteProps,
+  })
 
   return (
-    autocompleteOpen &&
-    tagretRef?.current && (
-      <Drop
-        width={60}
-        target={tagretRef.current}
-        align={{ top: "bottom", left: "left" }}
-        animation
-        background="inputBg"
-        margin={[1, 0, 0]}
-        round={1}
-        close={() => {}}
-        onClickOutside={() => {}}
-        onEsc={() => {}}
-      >
-        <Options suggestions={suggestions} />
-      </Drop>
+    autocompleteOpen && (
+      <StyledOptionsContainer>
+        <Dropdown items={suggestions} Item={Item} onItemClick={onItemClick} width="100%" />
+      </StyledOptionsContainer>
     )
   )
 }

src/components/input/autocomplete/options.js

@@ -1,11 +1,9 @@
 import styled from "styled-components"
+import Flex from "@/components/templates/flex"
 
-export const StyledOption = styled.li`
-  &:hover {
-    background-color: red;
-  }
-
-  &:focus {
-    background-color: red;
-  }
+export const StyledOptionsContainer = styled(Flex)`
+  width: 300px;
+  position: absolute;
+  left: 0;
+  top: 36px;
 `

src/components/input/autocomplete/styled.js

@@ -1,16 +1,19 @@
+import { useCallback } from "react"
 import { useState, useEffect } from "react"
 
 const useAutocomplete = ({ value, autocompleteProps = {} } = {}) => {
   const [autocompleteOpen, setAutocompleteOpen] = useState()
   const { suggestions = [] } = autocompleteProps || {}
 
+  const onItemClick = useCallback(e => console.log(e), [])
+
   useEffect(() => {
     if (suggestions.length) {
       setAutocompleteOpen(!!value.length)
     }
   }, [suggestions, value, setAutocompleteOpen])
 
-  return { autocompleteOpen, suggestions }
+  return { autocompleteOpen, suggestions, onItemClick }
 }
 
 export default useAutocomplete

src/components/input/autocomplete/useAutocomplete.js

@@ -1,4 +1,4 @@
-import React, { useRef, useMemo } from "react"
+import React, { useMemo } from "react"
 import Flex from "@/components/templates/flex"
 import { TextMicro } from "@/components/typography"
 import { Input, LabelText } from "./styled"
@@ -36,8 +36,6 @@ export const TextInput = ({
   autocompleteProps,
   ...props
 }) => {
-  const inputContainerRef = useRef()
-
   const autocompleteInputProps = useMemo(
     () =>
       autocompleteProps
@@ -50,9 +48,16 @@ export const TextInput = ({
   )
 
   return (
-    <Flex gap={0.5} column className={className} {...containerStyles} as="label">
+    <Flex
+      gap={0.5}
+      column
+      className={className}
+      position="relative"
+      {...containerStyles}
+      as="label"
+    >
       {typeof label === "string" ? <LabelText size={size}>{label}</LabelText> : label}
-      <Flex ref={inputContainerRef} position="relative" {...inputContainerStyles}>
+      <Flex position="relative" {...inputContainerStyles}>
         {iconLeft && (
           <Flex position="absolute" left={1} top={0} bottom={0} alignItems="center">
             {iconLeft}
@@ -87,11 +92,7 @@ export const TextInput = ({
       </Flex>
       {typeof hint === "string" ? <TextMicro color="textLite">{hint}</TextMicro> : !!hint && hint}
       {!hideErrorMessage ? <Error error={error} /> : null}
-      <Autocomplete
-        value={value}
-        autocompleteProps={autocompleteProps}
-        tagretRef={inputContainerRef}
-      />
+      <Autocomplete value={value} autocompleteProps={autocompleteProps} />
     </Flex>
   )
 }