@goplusvn/core 0.1.89 → 0.1.91

package/CHANGELOG.md

@@ -1,3 +1,59 @@
+## 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
+`conditionForOperator` — và bản chép thiếu `between`. Hệ quả nối nhau:
+
+- Trước 0.1.89: mảng `[từ, đến]` rơi xuống nhánh mặc định rồi đi thẳng vào
+  Prisma dạng array ⇒ nổ ở tầng driver. Bộ lọc khoảng ngày của app khai đúng
+  `type: "datetime"` + `operator: "between"` hỏng sẵn mà không ai báo.
+- 0.1.89 thêm `between` nhưng dịch cận trên thành `lte`: bộ chọn ngày chỉ chở
+  ngày trần, `lte: 31/08` là chặn ở **00:00** ngày cuối ⇒ ngày cuối bị cắt gần
+  hết. Chọn 01/08–31/08 thì đơn tạo lúc 9h sáng 31/08 rơi ra ngoài. Không có
+  exception nào, chỉ thiếu dữ liệu — khó phát hiện hơn hẳn lỗi ở trên.
+
+**Đổi**
+
+- `crud/lib/filter-tree.ts` — `conditionForOperator` thêm `case "between"`,
+  dựng khoảng **nửa mở** `[từ, đến+1 ngày)` khi cận trên là ngày trần (chuỗi
+  `YYYY-MM-DD`, hoặc `Date` đúng nửa đêm UTC do `coerceFieldValue` sinh ra).
+  Mốc có giờ thật giữ nguyên `lte`; khoảng số vẫn là khoảng đóng.
+  KHÔNG cộng offset múi giờ ở đây — cận dưới cũng đang hiểu theo nửa đêm UTC,
+  thêm offset vào một đầu thì hai đầu lệch nhau. App cần biên theo lịch địa
+  phương thì quy đổi trước khi gửi.
+- `crud/lib/query-builder.ts` — bỏ chuỗi `if/else` chép tay, gọi thẳng
+  `conditionForOperator`. Filter phẳng và `filterTree` từ nay không thể lệch
+  bảng toán tử nữa (có test đối chiếu từng toán tử giữa hai đường).
+
+**Quy tắc rút ra**: comment ghi "dùng chung" mà code vẫn chép tay thì chỗ chép
+sẽ tụt lại — hợp nhất thật, đừng ghi chú suông.
 ## 0.1.89 — Bộ lọc CRUD: `defaultValue` sống lại, chip vẽ một lần và đọc được
 
 Trang danh sách theo ngày (nghỉ phép, tăng ca, đăng ký suất ăn) mở ra là nạp

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.89",
+  "version": "0.1.91",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

package/src/crud/lib/filter-between.test.ts

@@ -0,0 +1,123 @@
+/**
+ * BỘ LỌC KHOẢNG NGÀY — `between`.
+ *
+ * Hai lỗi nối nhau, cùng một gốc: `buildListQuery` chép lại bảng toán tử thay
+ * vì gọi `conditionForOperator`, và bản chép thiếu `between`.
+ *
+ *  1. Trước 0.1.89: mảng `[từ, đến]` rơi xuống nhánh mặc định, đi thẳng vào
+ *     Prisma dạng array ⇒ nổ ở tầng driver. Hai bộ lọc khoảng ngày của vinhhoa
+ *     (orders.createdAt, purchaseOrders.orderDate) hỏng sẵn mà không ai báo.
+ *  2. 0.1.89 dịch thành `lte` ⇒ chặn ở 00:00 ngày cuối, NGÀY CUỐI BỊ CẮT gần
+ *     hết. Đây mới là kiểu hỏng nguy hiểm: không exception, chỉ thiếu dữ liệu.
+ *
+ * Bản vá: khoảng nửa mở `[từ, đến+1 ngày)`, và hai đường (filter phẳng /
+ * `filterTree`) dùng CHUNG một bảng toán tử để không lệch nhau lần nữa.
+ */
+import { describe, expect, it } from "vitest";
+
+import type { EntityConfig, FilterOperator } from "../../types";
+
+import { buildListQuery } from "./query-builder";
+import { conditionForOperator } from "./filter-tree";
+
+const config = {
+  name: "orders",
+  label: "Đơn",
+  pluralLabel: "Đơn",
+  fields: [
+    { name: "createdAt", label: "Ngày tạo", type: "datetime" },
+    { name: "total", label: "Tổng", type: "number" },
+  ],
+} as unknown as EntityConfig;
+
+function whereFor(value: unknown) {
+  return buildListQuery({
+    entity: "orders",
+    config,
+    params: {
+      page: 1,
+      pageSize: 10,
+      filters: [{ name: "createdAt", value, operator: "between" }],
+    },
+  }).where.createdAt;
+}
+
+describe("between — cận trên phải phủ hết ngày cuối", () => {
+  it("ngày trần dạng chuỗi ➝ nửa mở tới nửa đêm hôm sau", () => {
+    expect(whereFor(["2026-08-01", "2026-08-31"])).toEqual({
+      gte: "2026-08-01",
+      lt: new Date("2026-09-01T00:00:00.000Z"),
+    });
+  });
+
+  it("Date nửa đêm UTC (đã qua coerceFieldValue) cũng được nới", () => {
+    const where = whereFor([
+      new Date("2026-08-01T00:00:00.000Z"),
+      new Date("2026-08-31T00:00:00.000Z"),
+    ]);
+
+    expect((where as { lt: Date }).lt.toISOString()).toBe(
+      "2026-09-01T00:00:00.000Z",
+    );
+  });
+
+  it("bản ghi lúc 9h sáng ngày cuối nằm TRONG khoảng", () => {
+    const { lt } = whereFor(["2026-08-01", "2026-08-31"]) as { lt: Date };
+    expect(new Date("2026-08-31T09:00:00.000Z").getTime()).toBeLessThan(
+      lt.getTime(),
+    );
+  });
+
+  it("mốc CÓ giờ thật thì giữ nguyên lte, không tự nới thêm một ngày", () => {
+    const end = new Date("2026-08-31T12:30:00.000Z");
+    expect(whereFor(["2026-08-01T00:00:00.000Z", end])).toEqual({
+      gte: "2026-08-01T00:00:00.000Z",
+      lte: end,
+    });
+  });
+
+  it("mảng không đủ hai mốc ➝ trả nguyên giá trị, không dựng khoảng méo", () => {
+    expect(conditionForOperator("between", ["2026-08-01"])).toEqual([
+      "2026-08-01",
+    ]);
+  });
+
+  it("khoảng số vẫn là khoảng đóng — chỉ NGÀY mới được nới", () => {
+    expect(conditionForOperator("between", [1000, 5000])).toEqual({
+      gte: 1000,
+      lte: 5000,
+    });
+  });
+});
+
+describe("filter phẳng và filterTree dùng chung một bảng toán tử", () => {
+  const cases: [FilterOperator, unknown][] = [
+    ["contains", "an"],
+    ["in", [1, 2]],
+    ["notIn", [3]],
+    ["eq", 5],
+    ["ne", 5],
+    ["gt", 5],
+    ["gte", 5],
+    ["lt", 5],
+    ["lte", 5],
+    ["startsWith", "a"],
+    ["endsWith", "z"],
+    ["isNotNull", 1],
+    ["between", ["2026-08-01", "2026-08-31"]],
+  ];
+
+  it.each(cases)("%s cho cùng một điều kiện ở cả hai đường", (op, value) => {
+    const flat = buildListQuery({
+      entity: "orders",
+      config,
+      params: {
+        page: 1,
+        pageSize: 10,
+        filters: [{ name: "total", value, operator: op }],
+      },
+    }).where.total;
+
+    expect(flat).toEqual(conditionForOperator(op, value));
+  });
+});

package/src/crud/lib/filter-tree.ts

@@ -29,11 +29,46 @@ export type FilterTreeNode =
 const MAX_DEPTH = 4;
 const MAX_LEAVES = 30;
 
+const DATE_KEY = /^\d{4}-\d{2}-\d{2}$/;
+const DAY_MS = 86_400_000;
+
+/**
+ * Cận TRÊN của `between` khi mốc gửi xuống không mang giờ.
+ *
+ * Bộ chọn ngày chỉ chở ngày trần ("2026-08-31", hoặc `Date` đã ép về nửa đêm
+ * UTC — xem `coerceFieldValue`). Dịch thẳng thành `lte` là chặn ở 00:00 của
+ * ngày cuối, tức NGÀY CUỐI BỊ CẮT gần hết: chọn 01/08–31/08 thì bản ghi tạo
+ * lúc 9h sáng 31/08 rơi ra ngoài. Người dùng không thấy lỗi, chỉ thấy thiếu
+ * dữ liệu — kiểu hỏng khó phát hiện hơn hẳn một cái exception.
+ *
+ * Nên khoảng dựng NỬA MỞ: `[từ, đến+1 ngày)`. Không cộng múi giờ ở đây —
+ * cận dưới cũng đang hiểu theo nửa đêm UTC, thêm offset vào một đầu thì hai
+ * đầu lệch nhau. App nào cần biên theo lịch địa phương thì tự quy đổi trước
+ * khi gửi (xem cách tanloc-spartronics dùng `vnDateKeyToDbDate`).
+ *
+ * Mốc CÓ giờ thật thì giữ nguyên `lte` — đó là ý người gọi, không phải ngày trần.
+ */
+function upperDateBound(value: unknown): Record<string, unknown> {
+  if (typeof value === "string" && DATE_KEY.test(value)) {
+    return { lt: new Date(Date.parse(`${value}T00:00:00.000Z`) + DAY_MS) };
+  }
+  // Nửa đêm UTC chằn chặn = ngày trần đã qua `new Date("YYYY-MM-DD")`.
+  if (value instanceof Date && value.getTime() % DAY_MS === 0) {
+    return { lt: new Date(value.getTime() + DAY_MS) };
+  }
+  return { lte: value };
+}
+
 /** Điều kiện Prisma cho một toán tử — dùng chung với filter phẳng. */
 export function conditionForOperator(op: string, value: unknown): unknown {
   switch (op) {
     case "contains":
       return { contains: value, mode: "insensitive" };
+    // Khoảng [từ, đến] của bộ chọn ngày. Trước 0.1.89 KHÔNG có nhánh này: cả
+    // mảng rơi xuống `default` và đi thẳng vào Prisma dạng array ⇒ nổ ở driver.
+    case "between":
+      if (!Array.isArray(value) || value.length !== 2) return value;
+      return { gte: value[0], ...upperDateBound(value[1]) };
     case "in":
       return { in: value };
     case "notIn":

package/src/crud/lib/query-builder.ts

@@ -1,4 +1,4 @@
-import { compileFilterTree } from "./filter-tree";
+import { compileFilterTree, conditionForOperator } from "./filter-tree";
 import { CrudRequestError } from "./errors";
 import type { CrudQueryParams, EntityConfig } from "../../types";
 
@@ -58,25 +58,10 @@ export function buildListQuery({
         key = parts.pop()!;
         for (const p of parts) { if (!target[p]) target[p] = {}; target = target[p]; }
       }
-      const op = operator as string;
-      if (op === "contains") target[key] = { contains: value, mode: "insensitive" };
-      // Khoảng [từ, đến] của bộ chọn ngày. Thiếu nhánh này thì cả mảng rơi
-      // xuống `else` và đi thẳng vào Prisma dưới dạng array ⇒ nổ ở tầng driver.
-      else if (op === "between" && Array.isArray(value) && value.length === 2)
-        target[key] = { gte: value[0], lte: value[1] };
-      else if (op === "in") target[key] = { in: value };
-      else if (op === "notIn") target[key] = { notIn: value };
-      else if (op === "eq") target[key] = value;
-      else if (op === "ne") target[key] = { not: value };
-      else if (op === "gt") target[key] = { gt: value };
-      else if (op === "gte") target[key] = { gte: value };
-      else if (op === "lt") target[key] = { lt: value };
-      else if (op === "lte") target[key] = { lte: value };
-      else if (op === "startsWith") target[key] = { startsWith: value, mode: "insensitive" };
-      else if (op === "endsWith") target[key] = { endsWith: value, mode: "insensitive" };
-      else if (op === "isNull") target[key] = null;
-      else if (op === "isNotNull") target[key] = { not: null };
-      else target[key] = value;
+      // MỘT bảng toán tử cho cả hai đường (filter phẳng ở đây, `filterTree` ở
+      // dưới). Trước đây chỗ này chép lại chuỗi if riêng, và bản chép thiếu
+      // `between` — bộ lọc khoảng ngày của app khai đúng type vẫn nổ ở driver.
+      target[key] = conditionForOperator(operator as string, value);
     }
   }
 

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