"use client";

import * as React from "react";

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

export interface ComboboxOption {
  label: string;
  value: string;
  description?: string;
}

export interface ComboboxProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  options?: ComboboxOption[];
  value?: string | null;
  onChange?: (value: string | null) => void;
  placeholder?: string;
  emptyMessage?: string;
  clearLabel?: string;
}

const ClearIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M6 6l12 12M18 6l-12 12"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const ChevronIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <path
      d="M6 9l6 6 6-6"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

export const Combobox = React.forwardRef<HTMLDivElement, ComboboxProps>(
  (
    {
      className,
      options = [],
      value,
      onChange,
      placeholder = "Select an option",
      emptyMessage = "No matches found",
      clearLabel = "Clear selection",
      ...props
    },
    ref
  ) => {
    const [internalValue, setInternalValue] = React.useState<string | null>(null);
    const [query, setQuery] = React.useState("");
    const [isOpen, setIsOpen] = React.useState(false);
    const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
    const containerRef = React.useRef<HTMLDivElement>(null);
    const inputRef = React.useRef<HTMLInputElement>(null);

    const selectedValue = value !== undefined ? value : internalValue;
    const selectedOption = options.find((option) => option.value === selectedValue) ?? null;

    React.useEffect(() => {
      setQuery(selectedOption?.label ?? "");
    }, [selectedOption?.label]);

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

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

    const filteredOptions = options.filter((option) =>
      option.label.toLowerCase().includes(query.toLowerCase())
    );

    const updateValue = (nextValue: string | null) => {
      if (value === undefined) {
        setInternalValue(nextValue);
      }
      onChange?.(nextValue);
    };

    const handleSelect = (option: ComboboxOption) => {
      updateValue(option.value);
      setQuery(option.label);
      setIsOpen(false);
      setHighlightedIndex(-1);
      inputRef.current?.blur();
    };

    const handleClear = () => {
      updateValue(null);
      setQuery("");
      setIsOpen(false);
      setHighlightedIndex(-1);
      inputRef.current?.focus();
    };

    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
      if (!isOpen && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
        setIsOpen(true);
        return;
      }

      switch (event.key) {
        case "ArrowDown":
          event.preventDefault();
          setHighlightedIndex((prev) =>
            prev < filteredOptions.length - 1 ? prev + 1 : 0
          );
          break;
        case "ArrowUp":
          event.preventDefault();
          setHighlightedIndex((prev) =>
            prev > 0 ? prev - 1 : filteredOptions.length - 1
          );
          break;
        case "Enter":
          event.preventDefault();
          if (filteredOptions[highlightedIndex]) {
            handleSelect(filteredOptions[highlightedIndex]);
          }
          break;
        case "Escape":
          setIsOpen(false);
          setHighlightedIndex(-1);
          break;
      }
    };

    const showClear = query.length > 0 || selectedValue !== null;

    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="relative">
          <input
            ref={inputRef}
            value={query}
            onChange={(event) => {
              setQuery(event.target.value);
              setIsOpen(true);
              setHighlightedIndex(0);
            }}
            onFocus={() => setIsOpen(true)}
            onKeyDown={handleKeyDown}
            placeholder={placeholder}
            role="combobox"
            aria-expanded={isOpen}
            aria-controls="combobox-options"
            aria-autocomplete="list"
            className={cn(
              "w-full rounded-lg border border-border bg-background py-2.5 pl-3 pr-10 text-sm text-foreground",
              "placeholder:text-muted-foreground",
              "transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            )}
          />
          <div className="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-1">
            {showClear ? (
              <button
                type="button"
                onClick={handleClear}
                aria-label={clearLabel}
                className="rounded-md p-1 text-muted-foreground transition hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              >
                <ClearIcon className="h-3.5 w-3.5" />
              </button>
            ) : null}
            <ChevronIcon className="h-4 w-4 text-muted-foreground" />
          </div>
        </div>

        {isOpen ? (
          <div className="absolute z-20 mt-2 w-full rounded-lg border border-border bg-card p-2 shadow-lg">
            {filteredOptions.length === 0 ? (
              <div className="px-3 py-2 text-sm text-muted-foreground">
                {emptyMessage}
              </div>
            ) : (
              <ul role="listbox" id="combobox-options" className="max-h-56 overflow-y-auto">
                {filteredOptions.map((option, index) => (
                  <li key={option.value}>
                    <button
                      type="button"
                      onMouseDown={(event) => event.preventDefault()}
                      onClick={() => handleSelect(option)}
                      className={cn(
                        "flex w-full items-center justify-between rounded-md px-3 py-2 text-left text-sm",
                        index === highlightedIndex
                          ? "bg-muted text-foreground"
                          : "text-foreground",
                        "transition focus-visible:outline-none"
                      )}
                    >
                      <div>
                        <div className="font-medium">{option.label}</div>
                        {option.description ? (
                          <div className="text-xs text-muted-foreground">
                            {option.description}
                          </div>
                        ) : null}
                      </div>
                    </button>
                  </li>
                ))}
              </ul>
            )}
          </div>
        ) : null}
      </div>
    );
  }
);

Combobox.displayName = "Combobox";
Combobox

Dependencies

Files

Installation
