Command list appearing issue inside table with horizontal scroll.

[iaaliahmad]

"use client";

import * as React from "react";
import { X } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import {
Command,
CommandGroup,
CommandItem,
CommandList,
} from "@/components/ui/command";
import { Command as CommandPrimitive } from "cmdk";

type Option = Record<"value" | "label", string>;

interface SearchableSelectProps {
options: Option[];
value: Option | Option[] | null;
onChange: (value: Option | Option[] | null) => void;
multiple?: boolean;
placeholder?: string;
className?: string;
hasError?: boolean;
onInputChange?: (value: string) => void;
isLoading?: boolean;
}

export default function SearchableSelect({
options,
value,
onChange,
placeholder = "Select an option",
multiple = false,
className = "",
hasError = false,
onInputChange, // server-side handling
isLoading = false,
}: SearchableSelectProps) {

const inputRef                    = React.useRef<HTMLInputElement>(null);
const [open, setOpen]             = React.useState(false);
const [inputValue, setInputValue] = React.useState("");

const selectedOptions = React.useMemo(() => {
    if (multiple) {
        const values = (value as Option[]) || [];
        return options.filter((opt) =>
            values.some((val) => val.value === opt.value)
        );
    }
    if (value) {
        value = options.find((opt) => opt.value === value);
        return options.filter((opt) => opt.value === (value as Option).value);
    }
    return [];
}, [value, multiple, options]);

const handleUnselect = (option: Option) => {
    if (multiple) {
        const newValue = selectedOptions.filter((s) => s.value !== option.value);
        onChange(newValue.length ? newValue : null);
    } else {
        onChange(null);
    }
};

const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    const input = inputRef.current;
    if (!input) return;
    
    if (e.key === "Delete" || e.key === "Backspace") {
        if (input.value === "") {
            if (multiple) {
                const newSelected = [...selectedOptions];
                newSelected.pop();
                onChange(newSelected.length ? newSelected : null);
            } else {
                onChange(null);
            }
        }
    }
    if (e.key === "Escape") {
        input.blur();
    }
};

const selectables = options.filter(
    (option) => !selectedOptions.some((s) => s.value === option.value),
);

return (
    <Command
        onKeyDown={handleKeyDown}
        className={`overflow-visible bg-transparent ${className}`}
    >
        <div className="group rounded-md border border-input px-3 py-2 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
            <div className="flex flex-wrap gap-1">
                {selectedOptions.map((selectedOption) => (
                    <Badge
                        key={selectedOption.value}
                        className="flex items-center gap-1 rounded bg-white border-1 border-gray text-black shadow px-2 py-1 dark:bg-gray-600 dark:text-white dark:shadow-md"
                    >
                        <span>{selectedOption.label}</span>
                        <button
                            className="ml-1 flex h-4 w-4 items-center justify-center rounded-full transition-colors hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-ring dark:hover:bg-gray-600"
                            onKeyDown={(e) => {
                                if (e.key === "Enter") handleUnselect(selectedOption);
                            }}
                            onMouseDown={(e) => {
                                e.preventDefault();
                                e.stopPropagation();
                            }}
                            onClick={() => handleUnselect(selectedOption)}
                            aria-label={`Remove ${selectedOption.label}`}
                        >
                            <X className="h-3 w-3 text-muted-foreground dark:text-white" />
                        </button>
                    </Badge>
                ))}
                <CommandPrimitive.Input
                    ref={inputRef}
                    value={inputValue}
                    onValueChange={setInputValue}
                    onBlur={() => setOpen(false)}
                    onFocus={() => setOpen(true)}
                    placeholder={placeholder}
                    className="ml-1 flex-1 bg-transparent outline-none placeholder:text-muted-foreground"
                />
            </div>
        </div>
        <div className="relative mt-2">
            <CommandList>
                {open && selectables.length > 0 ? (
                    <div className="absolute top-0 z-10 w-full rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in">
                        <CommandGroup className="h-full overflow-auto">
                            {selectables.map((option) => (
                                <CommandItem
                                    key={option.value}
                                    onMouseDown={(e) => {
                                        e.preventDefault();
                                        e.stopPropagation();
                                    }}
                                    onSelect={() => {
                                        setInputValue("");
                                        if (multiple) {
                                            onChange([...(selectedOptions || []), option]);
                                        } else {
                                            onChange(option);
                                        }
                                    }}
                                    className="cursor-pointer"
                                >
                                    {option.label}
                                </CommandItem>
                            ))}
                        </CommandGroup>
                    </div>
                ) : null}
            </CommandList>
        </div>
    </Command>
);

}