Add dropdown key navigation

Author: kapantzak

src/components/drops/menu/dropdown.js

@@ -5,6 +5,7 @@ import Flex from "@/components/templates/flex"
 import Search from "@/components/search"
 import Box from "@/components/templates/box"
 import { mergeRefs } from "@/utils"
+import { useCallback } from "react"
 
 const Container = styled(Flex)`
   ${({ hideShadow }) =>
@@ -15,6 +16,19 @@ const Container = styled(Flex)`
 
 const defaultEstimateSize = () => 28
 
+const indexCalculatorByKey = {
+  ArrowDown: (index, length) => Math.min(index + 1, length - 1),
+  ArrowUp: index => Math.max(index - 1, 0),
+  Home: () => 0,
+  End: (_, length) => length - 1,
+  default: index => index,
+}
+
+const getNextIndex = (currentIndex, key, itemsLength) => {
+  const calculator = indexCalculatorByKey[key] || indexCalculatorByKey.default
+  return calculator(currentIndex, itemsLength)
+}
+
 const Dropdown = forwardRef(
   (
     {
@@ -32,6 +46,9 @@ const Dropdown = forwardRef(
       gap = 0,
       estimateSize = defaultEstimateSize,
       close,
+      enableKeyNavigation,
+      activeIndex,
+      setActiveIndex,
       ...rest
     },
     forwardedRef
@@ -61,6 +78,31 @@ const Dropdown = forwardRef(
       estimateSize,
     })
 
+    const handleKeyDown = useCallback(
+      event => {
+        if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.code)) {
+          setActiveIndex(prevIndex => {
+            const nextIndex = getNextIndex(prevIndex, event.code, items.length)
+            rowVirtualizer.scrollToIndex(nextIndex)
+            return nextIndex
+          })
+        }
+      },
+      [rowVirtualizer, items, setActiveIndex]
+    )
+
+    const virtualContainerProps = useMemo(() => {
+      if (enableKeyNavigation)
+        return {
+          tabIndex: 0,
+          role: "listbox",
+          "aria-activedescendant": `item-${activeIndex}`,
+          onKeyDown: handleKeyDown,
+        }
+
+      return {}
+    }, [enableKeyNavigation, activeIndex, handleKeyDown])
+
     return (
       <Container
         as="ul"
@@ -86,6 +128,7 @@ const Dropdown = forwardRef(
             height: "100%",
             overflow: "auto",
           }}
+          {...virtualContainerProps}
         >
           <div
             style={{
@@ -116,6 +159,7 @@ const Dropdown = forwardRef(
                   value={value}
                   onItemClick={onItemClick}
                   close={close}
+                  {...(enableKeyNavigation ? { enableKeyNavigation: true, activeIndex } : {})}
                 />
               </div>
             ))}

src/components/drops/menu/dropdownItem.js

@@ -13,6 +13,8 @@ export const ItemContainer = styled(Flex).attrs(props => ({
   cursor: ${({ cursor }) => cursor ?? "pointer"};
   opacity: ${({ disabled, selected }) => (selected ? 0.9 : disabled ? 0.4 : 1)};
   pointer-events: ${({ disabled }) => (disabled ? "none" : "auto")};
+  background-color: ${props =>
+    props.activeIndex == props.index ? getColor("borderSecondary")(props) : "none"};
 
   &:hover {
     background-color: ${props => getColor("borderSecondary")(props)};
@@ -43,6 +45,7 @@ const DropdownItem = ({
   onItemClick,
   index,
   style,
+  enableKeyNavigation,
   ...rest
 }) => {
   const selected = selectedValue === value
@@ -54,11 +57,14 @@ const DropdownItem = ({
 
   return (
     <ItemContainer
+      id={`item-${index}`}
       data-index={index}
       aria-selected={selected}
       disabled={disabled}
       selected={selected}
       onClick={onSelect}
+      index={index}
+      {...(enableKeyNavigation ? { role: "option" } : {})}
       {...restItem}
       {...rest}
       style={style}

src/components/input/autocomplete/index.js

@@ -1,22 +1,48 @@
-import React from "react"
+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 useAutocomplete from "./useAutocomplete"
 
-const Autocomplete = ({ value, autocompleteProps, Item = DropdownItem }) => {
-  const { autocompleteOpen, suggestions, onItemClick } = useAutocomplete({
+const Autocomplete = forwardRef(({ value, autocompleteProps, onInputChange, onEsc }, ref) => {
+  const [activeIndex, setActiveIndex] = useState(0)
+  const { autocompleteOpen, close, suggestions, onItemClick } = useAutocomplete({
     value,
+    onInputChange,
     autocompleteProps,
   })
 
+  const onKeyDown = useCallback(
+    e => {
+      if (e.code == "Escape") {
+        onEsc()
+        close()
+      } else if (e.code == "Enter") {
+        onItemClick(suggestions[activeIndex]?.value)
+        onEsc()
+        close()
+      }
+    },
+    [activeIndex, suggestions, onItemClick, onEsc, close]
+  )
+
   return (
     autocompleteOpen && (
       <StyledOptionsContainer>
-        <Dropdown items={suggestions} Item={Item} onItemClick={onItemClick} width="100%" />
+        <Dropdown
+          ref={ref}
+          items={suggestions}
+          Item={DropdownItem}
+          onItemClick={onItemClick}
+          width="100%"
+          onKeyDown={onKeyDown}
+          enableKeyNavigation
+          activeIndex={activeIndex}
+          setActiveIndex={setActiveIndex}
+        />
       </StyledOptionsContainer>
     )
   )
-}
+})
 
 export default Autocomplete

src/components/input/autocomplete/styled.js

@@ -3,6 +3,7 @@ import Flex from "@/components/templates/flex"
 
 export const StyledOptionsContainer = styled(Flex)`
   width: 300px;
+  max-height: 300px;
   position: absolute;
   left: 0;
   top: 36px;

src/components/input/autocomplete/useAutocomplete.js

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

src/components/input/input.js

@@ -1,8 +1,9 @@
-import React, { useMemo } from "react"
+import React, { useMemo, useRef, useCallback } from "react"
 import Flex from "@/components/templates/flex"
 import { TextMicro } from "@/components/typography"
 import { Input, LabelText } from "./styled"
 import Autocomplete from "./autocomplete"
+import { mergeRefs } from "@/utils"
 
 const Error = ({ error }) => {
   const errorMessage = error === true ? "invalid" : error
@@ -36,15 +37,34 @@ export const TextInput = ({
   autocompleteProps,
   ...props
 }) => {
+  const ref = useRef()
+  const autocompleteMenuRef = useRef()
+
+  const onKeyDown = useCallback(
+    e => {
+      if (autocompleteMenuRef.current && ["ArrowDown", "ArrowUp"].includes(e.key)) {
+        autocompleteMenuRef.current.focus()
+      }
+    },
+    [autocompleteMenuRef?.current]
+  )
+
+  const onAutocompleteEscape = useCallback(() => {
+    if (ref?.current) {
+      ref.current.focus()
+    }
+  }, [ref])
+
   const autocompleteInputProps = useMemo(
     () =>
       autocompleteProps
         ? {
             "aria-autocomplete": "list",
             "aria-controls": "autocomplete-list",
+            onKeyDown,
           }
         : {},
-    []
+    [autocompleteProps, onKeyDown]
   )
 
   return (
@@ -76,7 +96,7 @@ export const TextInput = ({
           type="text"
           value={value}
           size={size}
-          ref={inputRef}
+          ref={mergeRefs(inputRef, ref)}
           error={error}
           hasValue={!!value}
           {...autocompleteInputProps}
@@ -92,7 +112,13 @@ export const TextInput = ({
       </Flex>
       {typeof hint === "string" ? <TextMicro color="textLite">{hint}</TextMicro> : !!hint && hint}
       {!hideErrorMessage ? <Error error={error} /> : null}
-      <Autocomplete value={value} autocompleteProps={autocompleteProps} />
+      <Autocomplete
+        ref={autocompleteMenuRef}
+        value={value}
+        onEsc={onAutocompleteEscape}
+        autocompleteProps={autocompleteProps}
+        onInputChange={props.onChange}
+      />
     </Flex>
   )
 }

src/components/input/input.stories.js

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