@goplusvn/core 0.1.90 → 0.1.92

package/src/ui/primitives/combobox.tsx

@@ -7,7 +7,7 @@ import { Check, ChevronsUpDown, Search, X } from "lucide-react";
 import { cn } from "../../utils";
 import { Button } from "./button";
 import { Input } from "./input";
-import { ScrollArea } from "./scroll-area";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 
 export interface ComboboxOption {
   value: string | number | boolean;
@@ -24,6 +24,11 @@ interface ComboboxProps {
   disabled?: boolean;
   className?: string;
   id?: string;
+  /**
+   * Chiều cao tối đa của panel (mặc định 20rem). Radix vẫn cắt tiếp theo chỗ
+   * trống thực tế của màn hình, nên đây chỉ là trần trên.
+   */
+  maxHeight?: string;
 }
 
 export function Combobox({
@@ -36,12 +41,11 @@ export function Combobox({
   disabled = false,
   className,
   id,
+  maxHeight = "20rem",
 }: ComboboxProps) {
   const [open, setOpen] = useState(false);
   const [searchValue, setSearchValue] = useState("");
-  const containerRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
 
   const selectedOption = options.find(
     (option) => String(option.value) === String(value),
@@ -67,53 +71,6 @@ export function Combobox({
     }
   }, [open]);
 
-  // Focus search input when dropdown opens
-  useEffect(() => {
-    if (open && searchInputRef.current) {
-      // Small delay to ensure dropdown is rendered
-      setTimeout(() => {
-        searchInputRef.current?.focus();
-      }, 50);
-    }
-  }, [open]);
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    if (!open) return;
-
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as HTMLElement;
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(target) &&
-        dropdownRef.current &&
-        !dropdownRef.current.contains(target)
-      ) {
-        // Don't close if clicking inside dialog
-        if (target.closest('[data-slot="dialog-content"]')) {
-          return;
-        }
-        setOpen(false);
-      }
-    };
-
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === "Escape" && open) {
-        event.stopPropagation();
-        setOpen(false);
-      }
-    };
-
-    // Use capture phase to catch events before Dialog
-    document.addEventListener("mousedown", handleClickOutside, true);
-    document.addEventListener("keydown", handleEscape, true);
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside, true);
-      document.removeEventListener("keydown", handleEscape, true);
-    };
-  }, [open]);
-
   const handleSelect = useCallback(
     (optionValue: string | number | boolean) => {
       if (onValueChange) {
@@ -137,154 +94,174 @@ export function Combobox({
   );
 
   return (
-    <div ref={containerRef} className="relative w-full">
-      <Button
-        type="button"
-        variant="outline"
-        role="combobox"
-        aria-expanded={open}
-        disabled={disabled}
-        className={cn("w-full justify-between h-auto min-h-9 text-left whitespace-normal gap-2", className)}
-        id={id}
-        onClick={(e) => {
-          e.stopPropagation();
-          setOpen(!open);
-        }}
-      >
-        <span className="break-words min-w-0">
-          {selectedOption ? selectedOption.label : placeholder}
-        </span>
-        <div className="ml-2 flex items-center gap-1 shrink-0">
-          {selectedOption && (
-            <div
-              role="button"
-              tabIndex={0}
-              className="h-4 w-4 p-0 hover:bg-transparent cursor-pointer flex items-center justify-center"
-              onClick={handleClear}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  handleClear(e as any);
-                }
-              }}
-            >
-              <X className="h-3.5 w-3.5 text-red-500 hover:text-red-600" />
-            </div>
+    <Popover
+      open={open}
+      onOpenChange={(next) => {
+        if (disabled && next) return;
+        setOpen(next);
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(
+            "w-full justify-between h-auto min-h-9 text-left whitespace-normal gap-2",
+            className,
           )}
-          <ChevronsUpDown className="h-4 w-4 opacity-50" />
-        </div>
-      </Button>
-
-      {open && (
-        <div
-          ref={dropdownRef}
-          className="absolute z-[100] mt-1 w-full rounded-md border bg-popover text-popover-foreground shadow-md"
-          style={{
-            top: "100%",
-            left: 0,
-          }}
+          id={id}
         >
-          <div className="flex flex-col">
-            {/* Search Input */}
-            <div className="flex items-center border-b px-3 py-2">
-              <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-              <Input
-                ref={searchInputRef}
-                placeholder={searchPlaceholder}
-                value={searchValue}
-                onChange={(e) => {
+          <span className="break-words min-w-0">
+            {selectedOption ? selectedOption.label : placeholder}
+          </span>
+          <div className="ml-2 flex items-center gap-1 shrink-0">
+            {selectedOption && (
+              <div
+                role="button"
+                tabIndex={0}
+                className="h-4 w-4 p-0 hover:bg-transparent cursor-pointer flex items-center justify-center"
+                onPointerDown={(e) => {
+                  // Radix Trigger mở/đóng theo pointerdown ở một số nhánh —
+                  // chặn sớm để nút xoá không kéo theo việc bật panel.
+                  e.preventDefault();
                   e.stopPropagation();
-                  setSearchValue(e.target.value);
                 }}
+                onClick={handleClear}
                 onKeyDown={(e) => {
-                  // Prevent Dialog from intercepting keyboard events
-                  e.stopPropagation();
-                  // Close dropdown on Escape
-                  if (e.key === "Escape") {
-                    e.preventDefault();
-                    setOpen(false);
-                  }
-                  // Select first filtered option on Enter
-                  if (e.key === "Enter") {
+                  if (e.key === "Enter" || e.key === " ") {
                     e.preventDefault();
-                    if (filteredOptions.length > 0) {
-                      handleSelect(filteredOptions[0].value);
-                    }
+                    e.stopPropagation();
+                    handleClear(e as unknown as React.MouseEvent);
                   }
                 }}
-                onClick={(e) => {
-                  e.stopPropagation();
-                }}
-                onFocus={(e) => {
-                  e.stopPropagation();
-                }}
-                className="border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-9 bg-transparent px-0"
-              />
-              {searchValue && (
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  className="h-6 w-6 p-0"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setSearchValue("");
-                    searchInputRef.current?.focus();
-                  }}
-                >
-                  <X className="h-3 w-3" />
-                </Button>
-              )}
-            </div>
-
-            {/* Options List */}
-            <ScrollArea className="max-h-[300px]">
-              {filteredOptions.length === 0 ? (
-                <div className="py-6 text-center text-sm text-muted-foreground">
-                  {emptyText}
-                </div>
-              ) : (
-                <div className="p-1">
-                  {filteredOptions.map((option) => {
-                    const isSelected = String(value) === String(option.value);
-                    return (
-                      <div
-                        key={String(option.value)}
-                        role="option"
-                        aria-selected={isSelected}
-                        className={cn(
-                          "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
-                          "hover:bg-accent hover:text-accent-foreground",
-                          isSelected && "bg-accent text-accent-foreground",
-                        )}
-                        onMouseDown={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          handleSelect(option.value);
-                        }}
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          handleSelect(option.value);
-                        }}
-                      >
-                        <Check
-                          className={cn(
-                            "mr-2 h-4 w-4 shrink-0",
-                            isSelected ? "opacity-100" : "opacity-0",
-                          )}
-                        />
-                        <span className="flex-1 truncate">{option.label}</span>
-                      </div>
-                    );
-                  })}
-                </div>
-              )}
-            </ScrollArea>
+              >
+                <X className="h-3.5 w-3.5 text-red-500 hover:text-red-600" />
+              </div>
+            )}
+            <ChevronsUpDown className="h-4 w-4 opacity-50" />
           </div>
+        </Button>
+      </PopoverTrigger>
+
+      {/*
+        Panel đi qua Portal của Radix + tự lật lên trên khi thiếu chỗ bên dưới
+        (`avoidCollisions` mặc định). Trước đây panel là `absolute` nằm trong
+        thân dialog (`overflow-y-auto`) nên bị CẮT NGANG ở mép dialog — chọn
+        combo trong CrudDialog chỉ thấy 1-2 dòng đầu.
+        - `--radix-popover-trigger-width`: panel rộng đúng bằng ô trigger.
+        - `--radix-popover-content-available-height`: trần chiều cao theo chỗ
+          trống thực tế, KHÔNG bao giờ tràn khỏi màn hình.
+      */}
+      <PopoverContent
+        align="start"
+        sideOffset={4}
+        collisionPadding={8}
+        onOpenAutoFocus={(e) => {
+          e.preventDefault();
+          searchInputRef.current?.focus();
+        }}
+        className="z-[100] w-[var(--radix-popover-trigger-width)] min-w-[12rem] p-0 flex flex-col overflow-hidden"
+        style={{
+          maxHeight: `min(${maxHeight}, var(--radix-popover-content-available-height, ${maxHeight}))`,
+        }}
+      >
+        {/* Search Input */}
+        <div className="flex items-center border-b px-3 py-2 shrink-0">
+          <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+          <Input
+            ref={searchInputRef}
+            placeholder={searchPlaceholder}
+            value={searchValue}
+            onChange={(e) => {
+              e.stopPropagation();
+              setSearchValue(e.target.value);
+            }}
+            onKeyDown={(e) => {
+              // Prevent Dialog from intercepting keyboard events
+              e.stopPropagation();
+              // Close dropdown on Escape
+              if (e.key === "Escape") {
+                e.preventDefault();
+                setOpen(false);
+              }
+              // Select first filtered option on Enter
+              if (e.key === "Enter") {
+                e.preventDefault();
+                if (filteredOptions.length > 0) {
+                  handleSelect(filteredOptions[0].value);
+                }
+              }
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-9 bg-transparent px-0"
+          />
+          {searchValue && (
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="h-6 w-6 p-0"
+              onClick={(e) => {
+                e.stopPropagation();
+                setSearchValue("");
+                searchInputRef.current?.focus();
+              }}
+            >
+              <X className="h-3 w-3" />
+            </Button>
+          )}
+        </div>
+
+        {/* Options List */}
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+          {filteredOptions.length === 0 ? (
+            <div className="py-6 text-center text-sm text-muted-foreground">
+              {emptyText}
+            </div>
+          ) : (
+            <div className="p-1">
+              {filteredOptions.map((option) => {
+                const isSelected = String(value) === String(option.value);
+                return (
+                  <div
+                    key={String(option.value)}
+                    role="option"
+                    aria-selected={isSelected}
+                    className={cn(
+                      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+                      "hover:bg-accent hover:text-accent-foreground",
+                      isSelected && "bg-accent text-accent-foreground",
+                    )}
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleSelect(option.value);
+                    }}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleSelect(option.value);
+                    }}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-4 w-4 shrink-0",
+                        isSelected ? "opacity-100" : "opacity-0",
+                      )}
+                    />
+                    <span className="flex-1 truncate">{option.label}</span>
+                  </div>
+                );
+              })}
+            </div>
+          )}
         </div>
-      )}
-    </div>
+      </PopoverContent>
+    </Popover>
   );
 }