"use client";

import * as React from "react";

import { Check, ChevronDown, X } from "lucide-react";

import { cn } from "@/lib/utils";

export type SearchableSelectOption = {
  label: string;
  value: string;
  description?: string;
};

export interface SearchableSelectProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  options: SearchableSelectOption[];
  value?: string | string[];
  onChange?: (value: string | string[]) => void;
  placeholder?: string;
  multiple?: boolean;
}

const toArrayValue = (value?: string | string[]) => {
  if (!value) return [];
  return Array.isArray(value) ? value : [value];
};

export const SearchableSelect = React.forwardRef<
  HTMLDivElement,
  SearchableSelectProps
>(
  (
    {
      className,
      options,
      value,
      onChange,
      placeholder = "Select an option",
      multiple = false,
      ...props
    },
    ref
  ) => {
    const [isOpen, setIsOpen] = React.useState(false);
    const [searchValue, setSearchValue] = React.useState("");
    const [highlightedIndex, setHighlightedIndex] = React.useState(0);
    const [internalValue, setInternalValue] = React.useState<string[]>([]);
    const containerRef = React.useRef<HTMLDivElement>(null);
    const inputRef = React.useRef<HTMLInputElement>(null);

    const selectedValues = value ? toArrayValue(value) : internalValue;

    const selectedOptions = React.useMemo(
      () => options.filter((option) => selectedValues.includes(option.value)),
      [options, selectedValues]
    );

    const filteredOptions = React.useMemo(() => {
      const query = searchValue.toLowerCase();
      if (!query) return options;
      return options.filter((option) =>
        option.label.toLowerCase().includes(query)
      );
    }, [options, searchValue]);

    const updateValue = React.useCallback(
      (nextValues: string[]) => {
        if (!value) {
          setInternalValue(nextValues);
        }
        if (multiple) {
          onChange?.(nextValues);
        } else {
          onChange?.(nextValues[0] ?? "");
        }
      },
      [multiple, onChange, value]
    );

    React.useEffect(() => {
      const handleClickOutside = (event: MouseEvent) => {
        if (
          containerRef.current &&
          !containerRef.current.contains(event.target as Node)
        ) {
          setIsOpen(false);
          setSearchValue("");
          setHighlightedIndex(0);
        }
      };

      if (isOpen) {
        document.addEventListener("mousedown", handleClickOutside);
      }

      return () => {
        document.removeEventListener("mousedown", handleClickOutside);
      };
    }, [isOpen]);

    const handleSelect = (option: SearchableSelectOption) => {
      if (multiple) {
        const isSelected = selectedValues.includes(option.value);
        const next = isSelected
          ? selectedValues.filter((item) => item !== option.value)
          : [...selectedValues, option.value];
        updateValue(next);
        return;
      }

      updateValue([option.value]);
      setIsOpen(false);
      setSearchValue("");
    };

    const handleRemove = (valueToRemove: string) => {
      updateValue(selectedValues.filter((item) => item !== valueToRemove));
    };

    const handleInputKeyDown = (
      event: React.KeyboardEvent<HTMLInputElement>
    ) => {
      if (event.key === "ArrowDown") {
        event.preventDefault();
        setIsOpen(true);
        setHighlightedIndex((prev) =>
          Math.min(prev + 1, filteredOptions.length - 1)
        );
      }

      if (event.key === "ArrowUp") {
        event.preventDefault();
        setIsOpen(true);
        setHighlightedIndex((prev) => Math.max(prev - 1, 0));
      }

      if (event.key === "Enter") {
        event.preventDefault();
        if (!isOpen) {
          setIsOpen(true);
          return;
        }
        const option = filteredOptions[highlightedIndex];
        if (option) {
          handleSelect(option);
        }
      }

      if (event.key === "Escape") {
        setIsOpen(false);
        setSearchValue("");
      }

      if (event.key === "Backspace" && multiple && searchValue === "") {
        updateValue(selectedValues.slice(0, -1));
      }
    };

    const inputValue = isOpen
      ? searchValue
      : multiple
        ? ""
        : selectedOptions[0]?.label ?? "";

    return (
      <div
        ref={(node) => {
          containerRef.current = node;
          if (typeof ref === "function") {
            ref(node);
          } else if (ref) {
            ref.current = node;
          }
        }}
        className={cn("relative w-full max-w-sm", className)}
        {...props}
      >
        <div className="flex min-h-[48px] w-full flex-wrap items-center gap-2 rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground">
          {multiple
            ? selectedOptions.map((option) => (
                <span
                  key={option.value}
                  className="flex items-center gap-1 rounded-full border border-border bg-muted px-2 py-1 text-xs text-foreground"
                >
                  {option.label}
                  <button
                    type="button"
                    className="text-muted-foreground transition hover:text-foreground"
                    onClick={() => handleRemove(option.value)}
                  >
                    <X className="h-3 w-3" />
                  </button>
                </span>
              ))
            : null}
          <input
            ref={inputRef}
            value={inputValue}
            onChange={(event) => {
              setSearchValue(event.target.value);
              setIsOpen(true);
              setHighlightedIndex(0);
            }}
            onFocus={() => {
              setIsOpen(true);
              setSearchValue("");
              setHighlightedIndex(0);
            }}
            onKeyDown={handleInputKeyDown}
            placeholder={selectedOptions.length === 0 ? placeholder : undefined}
            className="min-w-[120px] flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
            aria-expanded={isOpen}
            aria-controls="searchable-select-listbox"
            role="combobox"
          />
          <button
            type="button"
            className="rounded-md border border-border p-1 text-muted-foreground transition hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            onClick={() => setIsOpen((prev) => !prev)}
            aria-label="Toggle options"
          >
            <ChevronDown className="h-4 w-4" />
          </button>
        </div>

        {isOpen ? (
          <div className="absolute z-50 mt-2 w-full rounded-lg border border-border bg-card p-2 shadow-lg">
            {filteredOptions.length === 0 ? (
              <p className="px-3 py-2 text-xs text-muted-foreground">
                No matches found
              </p>
            ) : (
              <div id="searchable-select-listbox" role="listbox">
                {filteredOptions.map((option, index) => {
                  const isSelected = selectedValues.includes(option.value);
                  const isActive = index === highlightedIndex;

                  return (
                    <button
                      key={option.value}
                      type="button"
                      role="option"
                      aria-selected={isSelected}
                      className={cn(
                        "flex w-full items-start gap-2 rounded-md px-3 py-2 text-left text-sm text-foreground transition",
                        "hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                        isActive && "bg-muted",
                        isSelected && "bg-accent text-primary"
                      )}
                      onMouseEnter={() => setHighlightedIndex(index)}
                      onMouseDown={(event) => event.preventDefault()}
                      onClick={() => handleSelect(option)}
                    >
                      <span className="mt-0.5 h-4 w-4">
                        {isSelected ? (
                          <Check className="h-4 w-4 text-primary" />
                        ) : null}
                      </span>
                      <span className="flex flex-col">
                        <span className="text-sm font-medium">
                          {option.label}
                        </span>
                        {option.description ? (
                          <span className="text-xs text-muted-foreground">
                            {option.description}
                          </span>
                        ) : null}
                      </span>
                    </button>
                  );
                })}
              </div>
            )}
          </div>
        ) : null}
      </div>
    );
  }
);

SearchableSelect.displayName = "SearchableSelect";
Searchable Select

Dependencies

Files

Installation
