Searchable Select Dropdown

import { useState } from "react";

export function SearchableSelect({ options, value, onChange }) {
  const [query, setQuery] = useState("");
  const [open, setOpen] = useState(false);
  const filtered = options.filter((o) => o.toLowerCase().includes(query.toLowerCase()));

  return (
    <div className="relative w-64">
      <input
        value={open ? query : value}
        onFocus={() => setOpen(true)}
        onChange={(e) => setQuery(e.target.value)}
        className="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
        placeholder="Search…"
      />
      {open && (
        <ul className="absolute z-10 mt-1 max-h-48 w-full overflow-auto rounded-lg
          border border-slate-200 bg-white shadow-lg">
          {filtered.map((opt) => (
            <li
              key={opt}
              onClick={() => { onChange(opt); setOpen(false); setQuery(""); }}
              className="cursor-pointer px-3 py-2 text-sm hover:bg-indigo-50"
            >
              {opt}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}