"use client";

import * as React from "react";

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

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

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

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

export const ComboboxMulti = React.forwardRef<
  HTMLDivElement,
  ComboboxMultiProps
>(({ className, options, value, onChange, placeholder = "Search" }, 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 listId = React.useId();

  const selectedValues = value ?? internalValue;

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

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

  const updateValue = React.useCallback(
    (nextValue: string[]) => {
      if (!value) {
        setInternalValue(nextValue);
      }
      onChange?.(nextValue);
    },
    [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]);

  React.useEffect(() => {
    setHighlightedIndex(0);
  }, [searchValue]);

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

  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" && searchValue === "") {
      updateValue(selectedValues.slice(0, -1));
    }
  };

  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)}
    >
      <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">
        {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)}
              aria-label={`Remove ${option.label}`}
            >
              <X className="h-3 w-3" />
            </button>
          </span>
        ))}
        <input
          ref={inputRef}
          value={searchValue}
          onChange={(event) => {
            setSearchValue(event.target.value);
            setIsOpen(true);
          }}
          onFocus={() => {
            setIsOpen(true);
          }}
          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={listId}
          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={listId} 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-muted 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>
  );
});

ComboboxMulti.displayName = "ComboboxMulti";
Combobox Multi

Dependencies

Files

Installation
