<label for="country-combobox" class="sr-only">Country</label>
<div class="combobox">
  <input
    id="country-combobox"
    type="text"
    role="combobox"
    aria-haspopup="listbox"
    aria-expanded="false"
    aria-controls="country-listbox"
    aria-autocomplete="list"
    autocomplete="off"
  />

  <ul id="country-listbox" role="listbox" class="hidden">
    <li id="country-option-1" role="option">Canada</li>
    <li id="country-option-2" role="option">Germany</li>
    <li id="country-option-3" role="option">Japan</li>
  </ul>
</div>

import { useMemo, useState } from 'react'

const countries = ['Canada', 'Germany', 'Japan', 'Kenya', 'Peru']

export function CountryCombobox() {
  const [value, setValue] = useState('')
  const [expanded, setExpanded] = useState(false)
  const [activeIndex, setActiveIndex] = useState<number | null>(null)

  const filtered = useMemo(
    () => countries.filter((item) => item.toLowerCase().includes(value.toLowerCase())),
    [value]
  )

  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (!expanded && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
      event.preventDefault()
      setExpanded(true)
      setActiveIndex(0)
      return
    }

    if (event.key === 'ArrowDown') {
      event.preventDefault()
      setActiveIndex((prev) => Math.min((prev ?? -1) + 1, filtered.length - 1))
    } else if (event.key === 'ArrowUp') {
      event.preventDefault()
      setActiveIndex((prev) => Math.max((prev ?? filtered.length) - 1, 0))
    } else if (event.key === 'Enter' && activeIndex !== null) {
      event.preventDefault()
      setValue(filtered[activeIndex])
      setExpanded(false)
    } else if (event.key === 'Escape') {
      setExpanded(false)
      setActiveIndex(null)
    }
  }

  const activeId = activeIndex === null ? undefined : `country-${activeIndex}`

  return (
    <div className="relative">
      <label htmlFor="country" className="sr-only">
        Country
      </label>
      <input
        id="country"
        role="combobox"
        aria-expanded={expanded}
        aria-controls="country-listbox"
        aria-haspopup="listbox"
        aria-activedescendant={activeId}
        value={value}
        onChange={(event) => {
          setValue(event.target.value)
          setExpanded(true)
        }}
        onKeyDown={handleKeyDown}
        onBlur={() => setExpanded(false)}
      />

      <ul
        id="country-listbox"
        role="listbox"
        className={expanded ? 'absolute top-full left-0 w-full bg-white shadow-lg' : 'hidden'}
      >
        {filtered.map((item, index) => (
          <li
            id={`country-${index}`}
            role="option"
            key={item}
            aria-selected={index === activeIndex}
            onMouseDown={() => {
              setValue(item)
              setExpanded(false)
            }}
          >
            {item}
          </li>
        ))}
      </ul>
    </div>
  )
}