@goplusvn/core 0.1.90 → 0.1.91

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## 0.1.91 — Panel combobox không còn bị dialog cắt ngang
+
+Mở combo trong `CrudDialog` (ví dụ ô **Trạng thái** của form Nghỉ phép) chỉ
+thấy ô tìm kiếm và 1-2 dòng đầu: panel là `position: absolute` con của trigger,
+mà thân dialog là `overflow-y-auto` + `DialogContent` là `overflow-hidden` —
+phần vượt quá mép hộp cuộn bị CẮT. Trigger nằm càng thấp trong form thì càng
+mất nhiều dòng, và không cuộn tới được.
+
+**Đổi**
+
+- `ui/primitives/combobox.tsx` — dựng lại trên `Popover` của Radix thay vì
+  `absolute` + bộ nghe `mousedown`/`keydown` tự viết. Panel đi qua Portal nên
+  thoát mọi hộp cuộn cha; `avoidCollisions` tự LẬT LÊN TRÊN khi thiếu chỗ bên
+  dưới; `--radix-popover-trigger-width` giữ panel rộng đúng bằng ô, còn
+  `--radix-popover-content-available-height` chặn trần chiều cao theo chỗ trống
+  thật (mặc định tối đa `20rem`, chỉnh bằng prop mới `maxHeight`).
+- `ui/forms/multi-select.tsx` — cùng cách chữa. Bỏ biến `dropUp` đo tay (đo
+  theo viewport nên vẫn bị mép dialog cắt) và bộ nghe click-ra-ngoài riêng —
+  DismissableLayer của Radix lo cả click ngoài lẫn Escape, và Escape chỉ đóng
+  panel chứ không đóng dialog vì Radix xếp lớp.
+- Click ra ngoài combo NHƯNG vẫn trong dialog nay đóng panel. Trước đây có
+  ngoại lệ `target.closest('[data-slot="dialog-content"]')` giữ panel mở —
+  ngoại lệ đó chỉ tồn tại vì panel nằm trong dialog, giờ không cần nữa.
+
+**Quy tắc rút ra**: dropdown neo bằng `absolute` chỉ đúng khi không tổ tiên nào
+cắt — trong dialog/khung cuộn thì phải Portal, và để thư viện định vị lo việc
+lật hướng.
+
 ## 0.1.90 — `between` phủ hết ngày cuối, và một bảng toán tử duy nhất
 
 Tiếp bản 0.1.89. `buildListQuery` **chép lại** bảng toán tử thay vì gọi

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@goplusvn/core",
   "description": "GoPlusVN Platform Kit - ERP kernel: layout, RBAC, CRUD, multi-tenant, system pages",
-  "version": "0.1.90",
+  "version": "0.1.91",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

package/src/ui/forms/multi-select.tsx

@@ -6,7 +6,14 @@ import { Check, ChevronsUpDown, Loader2, Search, X } from "lucide-react";
 
 import { cn } from "../../utils";
 
-import { Badge, Button, Input } from "../primitives";
+import {
+  Badge,
+  Button,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../primitives";
 
 type OptionValue = string | number | boolean;
 
@@ -134,10 +141,7 @@ const stripAccents = (str: string) =>
  * Tìm vị trí khớp (không dấu, không phân biệt hoa thường) của query trong
  * label GỐC — trả về [start, end) trên chuỗi gốc để highlight.
  */
-function findMatchRange(
-  label: string,
-  query: string,
-): [number, number] | null {
+function findMatchRange(label: string, query: string): [number, number] | null {
   const q = stripAccents(query.trim().toLowerCase());
   if (!q || !label) return null;
   let stripped = "";
@@ -196,8 +200,6 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     const [internalValue, setInternalValue] =
       useState<OptionValue[]>(defaultValue);
     const [open, setOpen] = useState(false);
-    // Mở lên trên khi sát đáy viewport (dropdown ~360px bị cắt nếu luôn mở xuống)
-    const [dropUp, setDropUp] = useState(false);
     const [searchValue, setSearchValue] = useState("");
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     // Snapshot selection tại thời điểm MỞ dropdown (cho selectedFirst)
@@ -225,7 +227,6 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     // Refs
     const containerRef = useRef<HTMLDivElement>(null);
     const searchInputRef = useRef<HTMLInputElement>(null);
-    const dropdownRef = useRef<HTMLDivElement>(null);
     const listRef = useRef<HTMLDivElement>(null);
     const buttonRef = useRef<HTMLButtonElement>(null);
 
@@ -308,8 +309,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       setIsLoading(true);
       const timer = setTimeout(
         () => {
-          loadOptionsRef
-            .current!(searchValue)
+          loadOptionsRef.current!(searchValue)
             .then((opts) => {
               if (seq !== loadSeqRef.current) return;
               setRemoteOptions(opts);
@@ -440,42 +440,9 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       }
     }, [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]);
+    // Click-ra-ngoài + Escape do DismissableLayer của Radix Popover lo (panel
+    // đã đi qua Portal). Không tự nghe document nữa: hai lớp cùng đóng dễ
+    // đá nhau, và bộ nghe cũ còn phải chừa ngoại lệ cho dialog.
 
     // Accessibility announcements
     useEffect(() => {
@@ -508,9 +475,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     const handleSelect = useCallback(
       (optionValue: OptionValue) => {
         // Check if option is disabled
-        const option = filteredOptions.find(
-          (opt) => opt.value === optionValue,
-        );
+        const option = filteredOptions.find((opt) => opt.value === optionValue);
         if (option?.disabled) {
           return; // Don't allow selecting disabled options
         }
@@ -602,9 +567,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     // Các mục đã chọn kèm label (fallback String(value) nếu chưa biết label)
     const selectedOptions = useMemo(
       () =>
-        value.map(
-          (v) => knownOptions.get(v) ?? { value: v, label: String(v) },
-        ),
+        value.map((v) => knownOptions.get(v) ?? { value: v, label: String(v) }),
       [value, knownOptions],
     );
 
@@ -619,146 +582,158 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     );
 
     return (
-      <div ref={containerRef} className="relative w-full min-w-0 max-w-full">
-        {/* Screen Reader Live Regions */}
-        <div className="sr-only">
-          <div aria-live="polite" aria-atomic="true" role="status">
-            {politeMessage}
-          </div>
-          <div aria-live="assertive" aria-atomic="true" role="alert">
-            {assertiveMessage}
+      <Popover
+        open={open}
+        onOpenChange={(next) => {
+          if (disabled && next) return;
+          if (next && selectedFirst) setOpenSnapshot([...value]);
+          setOpen(next);
+        }}
+      >
+        <div ref={containerRef} className="relative w-full min-w-0 max-w-full">
+          {/* Screen Reader Live Regions */}
+          <div className="sr-only">
+            <div aria-live="polite" aria-atomic="true" role="status">
+              {politeMessage}
+            </div>
+            <div aria-live="assertive" aria-atomic="true" role="alert">
+              {assertiveMessage}
+            </div>
           </div>
-        </div>
 
-        <Button
-          ref={buttonRef}
-          type="button"
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          disabled={disabled}
-          className={cn(
-            "w-full max-w-full justify-between overflow-hidden h-auto min-h-9 px-3 py-1.5",
-            responsiveSettings.compactMode && "min-h-8 text-sm",
-            className,
-          )}
-          id={id}
-          onClick={(e) => {
-            e.stopPropagation();
-            if (!open) {
-              if (selectedFirst) setOpenSnapshot([...value]);
-              const rect = containerRef.current?.getBoundingClientRect();
-              if (rect) {
-                const spaceBelow = window.innerHeight - rect.bottom;
-                setDropUp(spaceBelow < 360 && rect.top > spaceBelow);
-              }
-            }
-            setOpen(!open);
-          }}
-        >
-          <div
-            className={cn(
-              "flex min-w-0 max-w-full items-center gap-1",
-              singleLine ? "flex-nowrap overflow-hidden" : "flex-wrap",
-            )}
-          >
-            {value.length === 0 ? (
-              <span className="text-muted-foreground">{placeholder}</span>
-            ) : isAllSelected ? (
-              <Badge
-                variant="secondary"
-                className="mr-1 min-w-0 shrink border-transparent bg-secondary font-normal hover:bg-secondary"
+          <PopoverTrigger asChild>
+            <Button
+              ref={buttonRef}
+              type="button"
+              variant="outline"
+              role="combobox"
+              aria-expanded={open}
+              disabled={disabled}
+              className={cn(
+                "w-full max-w-full justify-between overflow-hidden h-auto min-h-9 px-3 py-1.5",
+                responsiveSettings.compactMode && "min-h-8 text-sm",
+                className,
+              )}
+              id={id}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              <div
+                className={cn(
+                  "flex min-w-0 max-w-full items-center gap-1",
+                  singleLine ? "flex-nowrap overflow-hidden" : "flex-wrap",
+                )}
               >
-                <span className="truncate">Tất cả lựa chọn ({options.length})</span>
-              </Badge>
-            ) : (
-              <>
-                {/* singleLine: chip KHÔNG có nút × riêng (trigger hẹp, chữ cần
-                    chỗ) — bỏ chọn bằng dropdown hoặc × xóa-tất-cả */}
-                {visibleChips.map((opt, chipIndex) => (
+                {value.length === 0 ? (
+                  <span className="text-muted-foreground">{placeholder}</span>
+                ) : isAllSelected ? (
                   <Badge
-                    key={String(opt.value)}
                     variant="secondary"
-                    title={opt.label}
-                    className={cn(
-                      "min-w-0 shrink gap-1 font-normal",
-                      singleLine ? "max-w-full" : "max-w-[8.5rem] pr-1",
-                      chipColor === "neutral"
-                        ? "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary"
-                        : CHIP_COLORS[chipIndex % CHIP_COLORS.length],
-                    )}
+                    className="mr-1 min-w-0 shrink border-transparent bg-secondary font-normal hover:bg-secondary"
                   >
-                    <span className="truncate">{opt.label}</span>
-                    {!singleLine && (
-                      <span
-                        role="button"
-                        aria-label={`Bỏ chọn ${opt.label}`}
-                        className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm opacity-60 transition-opacity hover:opacity-100"
-                        onClick={(e) => handleRemove(opt.value, e)}
-                      >
-                        <X className="h-3 w-3" />
-                      </span>
-                    )}
+                    <span className="truncate">
+                      Tất cả lựa chọn ({options.length})
+                    </span>
                   </Badge>
-                ))}
-                {extraCount > 0 && (
-                  <Badge
-                    variant="secondary"
-                    title={selectedOptions
-                      .slice(chipLimit)
-                      .map((o) => o.label)
-                      .join(", ")}
-                    className={cn(
-                      "shrink-0 gap-1 border-transparent bg-secondary font-normal hover:bg-secondary",
-                      !singleLine && "pr-1",
-                    )}
-                  >
-                    +{extraCount}
-                    {!singleLine && (
-                      <span
-                        role="button"
-                        aria-label="Bỏ các mục vượt quá"
-                        title="Bỏ các mục vượt quá"
-                        className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
-                        onClick={clearExtraOptions}
+                ) : (
+                  <>
+                    {/* singleLine: chip KHÔNG có nút × riêng (trigger hẹp, chữ cần
+                    chỗ) — bỏ chọn bằng dropdown hoặc × xóa-tất-cả */}
+                    {visibleChips.map((opt, chipIndex) => (
+                      <Badge
+                        key={String(opt.value)}
+                        variant="secondary"
+                        title={opt.label}
+                        className={cn(
+                          "min-w-0 shrink gap-1 font-normal",
+                          singleLine ? "max-w-full" : "max-w-[8.5rem] pr-1",
+                          chipColor === "neutral"
+                            ? "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary"
+                            : CHIP_COLORS[chipIndex % CHIP_COLORS.length],
+                        )}
+                      >
+                        <span className="truncate">{opt.label}</span>
+                        {!singleLine && (
+                          <span
+                            role="button"
+                            aria-label={`Bỏ chọn ${opt.label}`}
+                            className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm opacity-60 transition-opacity hover:opacity-100"
+                            onClick={(e) => handleRemove(opt.value, e)}
+                          >
+                            <X className="h-3 w-3" />
+                          </span>
+                        )}
+                      </Badge>
+                    ))}
+                    {extraCount > 0 && (
+                      <Badge
+                        variant="secondary"
+                        title={selectedOptions
+                          .slice(chipLimit)
+                          .map((o) => o.label)
+                          .join(", ")}
+                        className={cn(
+                          "shrink-0 gap-1 border-transparent bg-secondary font-normal hover:bg-secondary",
+                          !singleLine && "pr-1",
+                        )}
                       >
-                        <X className="h-3 w-3" />
-                      </span>
+                        +{extraCount}
+                        {!singleLine && (
+                          <span
+                            role="button"
+                            aria-label="Bỏ các mục vượt quá"
+                            title="Bỏ các mục vượt quá"
+                            className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
+                            onClick={clearExtraOptions}
+                          >
+                            <X className="h-3 w-3" />
+                          </span>
+                        )}
+                      </Badge>
                     )}
-                  </Badge>
+                  </>
                 )}
-              </>
-            )}
-          </div>
-          <div className="ml-2 flex items-center space-x-1">
-            {value.length > 0 && (
-              <div
-                role="button"
-                aria-label="Bỏ chọn tất cả"
-                className="flex h-5 w-5 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  updateValue([]);
-                }}
-              >
-                <X className="h-3 w-3" />
               </div>
-            )}
-            <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
-          </div>
-        </Button>
-
-        {open && (
-          <div
-            ref={dropdownRef}
-            className={cn(
-              "absolute left-0 z-[100] w-full min-w-[15rem] rounded-md border bg-popover/95 backdrop-blur-md text-popover-foreground shadow-lg shadow-black/5 animate-in fade-in-0 zoom-in-95",
-              dropUp
-                ? "bottom-full mb-1 slide-in-from-bottom-1"
-                : "top-full mt-1 slide-in-from-top-1",
-            )}
+              <div className="ml-2 flex items-center space-x-1">
+                {value.length > 0 && (
+                  <div
+                    role="button"
+                    aria-label="Bỏ chọn tất cả"
+                    className="flex h-5 w-5 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      updateValue([]);
+                    }}
+                  >
+                    <X className="h-3 w-3" />
+                  </div>
+                )}
+                <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+              </div>
+            </Button>
+          </PopoverTrigger>
+
+          {/*
+          Panel qua Portal của Radix + tự lật lên trên khi thiếu chỗ (trước đây
+          là `absolute` nên bị CẮT ở mép thân dialog `overflow-y-auto`).
+          `--radix-popover-content-available-height` giữ panel luôn nằm trong
+          màn hình, không cần đo tay như biến `dropUp` cũ.
+        */}
+          <PopoverContent
+            align="start"
+            sideOffset={4}
+            collisionPadding={8}
+            onOpenAutoFocus={(e) => {
+              e.preventDefault();
+              searchInputRef.current?.focus();
+            }}
+            className="z-[100] flex w-[var(--radix-popover-trigger-width)] min-w-[15rem] flex-col overflow-hidden rounded-md border bg-popover/95 p-0 text-popover-foreground shadow-lg shadow-black/5 backdrop-blur-md"
+            style={{
+              maxHeight: "var(--radix-popover-content-available-height, 24rem)",
+            }}
           >
-            <div className="flex flex-col">
+            <div className="flex min-h-0 flex-1 flex-col">
               {/* Search Input */}
               <div className="flex items-center border-b px-2.5 py-1">
                 {isLoading ? (
@@ -884,7 +859,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
               {/* Options List */}
               <div
                 ref={listRef}
-                className="max-h-[250px] overflow-y-auto overflow-x-hidden"
+                className="min-h-0 max-h-[250px] flex-1 overflow-y-auto overflow-x-hidden overscroll-contain"
                 onScroll={(e) => {
                   if (isVirtual) setScrollTop(e.currentTarget.scrollTop);
                 }}
@@ -927,8 +902,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                         const optionIndex = virtualRange.start + i;
                         const isSelected = value.includes(option.value);
                         const isDisabled = option.disabled || false;
-                        const isHighlighted =
-                          optionIndex === highlightedIndex;
+                        const isHighlighted = optionIndex === highlightedIndex;
                         return (
                           <div
                             key={String(option.value)}
@@ -1003,9 +977,9 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                 )}
               </div>
             </div>
-          </div>
-        )}
-      </div>
+          </PopoverContent>
+        </div>
+      </Popover>
     );
   },
 );

package/src/ui/primitives/__tests__/combobox-portal.test.tsx

@@ -0,0 +1,91 @@
+import { describe, expect, it, vi, beforeAll } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+
+import { Combobox } from "../combobox";
+
+/**
+ * Panel của Combobox PHẢI nằm ngoài hộp cuộn của form/dialog.
+ *
+ * Lỗi cũ: panel là `position: absolute` con của trigger, nên khi combo nằm
+ * trong CrudDialog (thân dialog `overflow-y-auto`) thì danh sách bị CẮT ở mép
+ * dialog — chọn combo chỉ thấy 1-2 dòng đầu. Test này khoá lại: panel đi qua
+ * Portal (con của body), không phải con của hộp cuộn.
+ */
+
+beforeAll(() => {
+  // Radix Popper cần các API này; jsdom không có.
+  if (!globalThis.ResizeObserver) {
+    globalThis.ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    } as unknown as typeof ResizeObserver;
+  }
+  if (!Element.prototype.hasPointerCapture) {
+    Element.prototype.hasPointerCapture = () => false;
+    Element.prototype.setPointerCapture = () => {};
+    Element.prototype.releasePointerCapture = () => {};
+  }
+  if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = () => {};
+  }
+});
+
+const OPTIONS = [
+  { value: "pending", label: "Chờ duyệt" },
+  { value: "approved", label: "Đã duyệt" },
+  { value: "rejected", label: "Từ chối" },
+];
+
+function renderInScrollBox(onValueChange = vi.fn()) {
+  const utils = render(
+    <div data-testid="scroll-box" style={{ overflowY: "auto", height: 200 }}>
+      <Combobox
+        options={OPTIONS}
+        value="approved"
+        onValueChange={onValueChange}
+        placeholder="Chọn trạng thái"
+        searchPlaceholder="Search trạng thái..."
+      />
+    </div>,
+  );
+  return { ...utils, onValueChange };
+}
+
+describe("Combobox", () => {
+  it("mở panel ra ngoài hộp cuộn (portal), không bị hộp cha cắt", async () => {
+    renderInScrollBox();
+    fireEvent.click(screen.getByRole("combobox"));
+
+    const search = await screen.findByPlaceholderText("Search trạng thái...");
+    const scrollBox = screen.getByTestId("scroll-box");
+
+    expect(scrollBox.contains(search)).toBe(false);
+    expect(document.body.contains(search)).toBe(true);
+  });
+
+  it("lọc theo từ khoá và chọn được option", async () => {
+    const { onValueChange } = renderInScrollBox();
+    fireEvent.click(screen.getByRole("combobox"));
+
+    const search = await screen.findByPlaceholderText("Search trạng thái...");
+    fireEvent.change(search, { target: { value: "chờ" } });
+
+    await waitFor(() => expect(screen.queryByText("Từ chối")).toBeNull());
+
+    fireEvent.click(screen.getByText("Chờ duyệt"));
+    expect(onValueChange).toHaveBeenCalledWith("pending");
+  });
+
+  it("nút xoá trên trigger trả về undefined mà không mở panel", async () => {
+    const { onValueChange } = renderInScrollBox();
+    const clear = screen
+      .getByRole("combobox")
+      .querySelector('[role="button"]') as HTMLElement;
+
+    fireEvent.click(clear);
+
+    expect(onValueChange).toHaveBeenCalledWith(undefined);
+    expect(screen.queryByPlaceholderText("Search trạng thái...")).toBeNull();
+  });
+});

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>
   );
 }