@goplusvn/core 0.1.93 → 0.1.94

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 0.1.94 — Hỗ trợ Nested Modal Layer cho Combobox/MultiSelect & Chuẩn hoá tìm kiếm Tiếng Việt
+
+Khi bộ lọc `Combobox` hoặc `MultiSelect` nằm trong `<Sheet>` (bộ lọc mobile) hoặc `<Dialog>`,
+Radix Dialog's `FocusScope` (modal Focus Trap) trước đây nhận diện ô tìm kiếm là phần tử lạ
+ngoài modal do Popover thiếu cấu hình `modal={true}`, dẫn đến việc cướp lại focus và chặn
+chạm trên Mobile. Đồng thời, tìm kiếm tiếng Việt trước đây không xử lý ký tự `đ` và `Đ`.
+
+**Đổi**
+
+- `ui/primitives/combobox.tsx` & `ui/forms/multi-select.tsx` — hỗ trợ prop `modal?: boolean`
+  (mặc định `true`), truyền vào `<Popover modal={modal}>` để biến Popover thành Nested Modal Layer
+  chuẩn Radix. Focus Trap của Sheet/Dialog cha sẽ tạm hoãn khi Popover mở, cho phép gõ tìm kiếm và
+  chọn option mượt mà trên Mobile & Desktop.
+- `ui/primitives/combobox.tsx` & `ui/forms/multi-select.tsx` — nâng cấp thuật toán chuẩn hóa
+  `normalizeVietnamese` (loại bỏ dấu NFD + chuyển đổi `đ/Đ` $\rightarrow$ `d/D`), hỗ trợ tìm kiếm không dấu
+  chính xác (ví dụ "da" tìm thấy "Đã duyệt", "don hang" tìm thấy "Hủy đơn hàng").
+- `ui/primitives/combobox.tsx` & `ui/forms/multi-select.tsx` — tối ưu `onOpenAutoFocus` trên thiết bị
+  cảm ứng / mobile ($< 640\text{px}$) tránh tự động bật bàn phím ảo che khuất options; bổ sung
+  `max-w-[calc(100vw-1rem)]` chống tràn màn hình điện thoại khi nằm trong lưới 2 cột.
+- `ui/primitives/__tests__/combobox-portal.test.tsx` — bổ sung unit test cho portal rendering,
+  tiếng Việt không dấu & có dấu với `đ/Đ` cho cả Combobox và MultiSelect.
+
 ## 0.1.93 — Triệt tiêu lỗi Hydration Mismatch do Dynamic Imports không đồng bộ SSR
 
 Trang CRUD (`EntityCrudPage`) gặp lỗi Hydration Mismatch trong Next.js / React 19:

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

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

@@ -78,6 +78,11 @@ interface MultiSelectProps {
   loadOptions?: (search: string) => Promise<MultiSelectOption[]>;
   /** Text hiển thị khi đang tải (async mode) */
   loadingText?: string;
+  /**
+   * Chế độ modal cho Popover (mặc định true). Bắt buộc bật true khi nằm trong
+   * Dialog / Sheet để tránh FocusTrap cướp focus khỏi ô tìm kiếm và hỗ trợ chạm trên mobile.
+   */
+  modal?: boolean;
   className?: string;
   id?: string;
 }
@@ -134,20 +139,26 @@ const VIRTUALIZE_THRESHOLD = 200;
 const ITEM_HEIGHT = 32;
 const LIST_MAX_HEIGHT = 250;
 
-const stripAccents = (str: string) =>
-  str ? str.normalize("NFD").replace(/[\u0300-\u036f]/g, "") : "";
+const normalizeVietnamese = (str: string) =>
+  str
+    ? str
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f]/g, "")
+        .replace(/[đĐ]/g, (m) => (m === "đ" ? "d" : "D"))
+        .toLowerCase()
+    : "";
 
 /**
- * Tìm vị trí khớp (không dấu, không phân biệt hoa thường) của query trong
+ * Tìm vị trí khớp (không dấu, không phân biệt hoa thường, hỗ trợ đ/Đ) 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 {
-  const q = stripAccents(query.trim().toLowerCase());
+  const q = normalizeVietnamese(query.trim());
   if (!q || !label) return null;
   let stripped = "";
   const indexMap: number[] = [];
   for (let i = 0; i < label.length; i++) {
-    const s = stripAccents(label[i].toLowerCase());
+    const s = normalizeVietnamese(label[i]);
     for (let j = 0; j < s.length; j++) {
       stripped += s[j];
       indexMap.push(i);
@@ -193,6 +204,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       loadingText = "Đang tải...",
       className,
       id,
+      modal = true,
     },
     ref,
   ) => {
@@ -368,19 +380,15 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       if (!searchValue.trim()) {
         return sourceOptions;
       }
-      const searchLower = stripAccents(searchValue.toLowerCase());
+      const searchNorm = normalizeVietnamese(searchValue);
 
       return sourceOptions.filter((option) => {
-        const labelLower = option.label
-          ? stripAccents(option.label.toLowerCase())
-          : "";
-        const valueLower =
+        const labelNorm = normalizeVietnamese(option.label || "");
+        const valueNorm =
           option.value !== undefined && option.value !== null
-            ? stripAccents(String(option.value).toLowerCase())
+            ? normalizeVietnamese(String(option.value))
             : "";
-        return (
-          labelLower.includes(searchLower) || valueLower.includes(searchLower)
-        );
+        return labelNorm.includes(searchNorm) || valueNorm.includes(searchNorm);
       });
     }, [sourceOptions, searchValue, hasAsync]);
 
@@ -430,15 +438,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       }
     }, [highlightedIndex, isVirtual, 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]);
+
 
     // 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ễ
@@ -583,6 +583,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
 
     return (
       <Popover
+        modal={modal}
         open={open}
         onOpenChange={(next) => {
           if (disabled && next) return;
@@ -615,9 +616,6 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                 className,
               )}
               id={id}
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
             >
               <div
                 className={cn(
@@ -726,11 +724,21 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
             collisionPadding={8}
             onOpenAutoFocus={(e) => {
               e.preventDefault();
-              searchInputRef.current?.focus();
+              // Trên thiết bị cảm ứng / màn hình nhỏ, không ép mở bàn phím ảo để tránh che khuất danh sách
+              const isTouchOrMobile =
+                typeof window !== "undefined" &&
+                ((typeof window.matchMedia === "function" &&
+                  window.matchMedia("(pointer: coarse)").matches) ||
+                  (typeof window.innerWidth === "number" &&
+                    window.innerWidth < 640));
+              if (!isTouchOrMobile) {
+                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"
+            className="z-[100] flex w-[var(--radix-popover-trigger-width)] min-w-[15rem] max-w-[calc(100vw-1rem)] 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)",
+              maxHeight:
+                "min(24rem, var(--radix-popover-content-available-height, 24rem))",
             }}
           >
             <div className="flex min-h-0 flex-1 flex-col">

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

@@ -2,9 +2,10 @@ import { describe, expect, it, vi, beforeAll } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 
 import { Combobox } from "../combobox";
+import { MultiSelect } from "../../forms/multi-select";
 
 /**
- * Panel của Combobox PHẢI nằm ngoài hộp cuộn của form/dialog.
+ * Panel của Combobox và MultiSelect 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
@@ -69,14 +70,39 @@ describe("Combobox", () => {
     fireEvent.click(screen.getByRole("combobox"));
 
     const search = await screen.findByPlaceholderText("Search trạng thái...");
-    fireEvent.change(search, { target: { value: "chờ" } });
+    fireEvent.change(search, { target: { value: "chờ duyệt" } });
 
-    await waitFor(() => expect(screen.queryByText("Từ chối")).toBeNull());
+    await waitFor(() =>
+      expect(screen.queryByRole("option", { name: "Từ chối" })).toBeNull(),
+    );
 
-    fireEvent.click(screen.getByText("Chờ duyệt"));
+    fireEvent.click(screen.getByRole("option", { name: "Chờ duyệt" }));
     expect(onValueChange).toHaveBeenCalledWith("pending");
   });
 
+  it("lọc theo từ khoá tiếng Việt không dấu và đ/Đ", async () => {
+    const { onValueChange } = renderInScrollBox();
+    fireEvent.click(screen.getByRole("combobox"));
+
+    const search = await screen.findByPlaceholderText("Search trạng thái...");
+    // Gõ "duyet" không dấu -> "Từ chối" bị loại bỏ, tìm thấy "Chờ duyệt"
+    fireEvent.change(search, { target: { value: "duyet" } });
+    await waitFor(() =>
+      expect(screen.queryByRole("option", { name: "Từ chối" })).toBeNull(),
+    );
+    expect(screen.getByRole("option", { name: "Chờ duyệt" })).toBeTruthy();
+
+    // Gõ "da" -> tìm thấy "Đã duyệt" (xử lý đ/Đ), "Chờ duyệt" bị loại bỏ
+    fireEvent.change(search, { target: { value: "da" } });
+    await waitFor(() =>
+      expect(screen.queryByRole("option", { name: "Chờ duyệt" })).toBeNull(),
+    );
+    expect(screen.getByRole("option", { name: "Đã duyệt" })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("option", { name: "Đã duyệt" }));
+    expect(onValueChange).toHaveBeenCalledWith("approved");
+  });
+
   it("nút xoá trên trigger trả về undefined mà không mở panel", async () => {
     const { onValueChange } = renderInScrollBox();
     const clear = screen
@@ -89,3 +115,56 @@ describe("Combobox", () => {
     expect(screen.queryByPlaceholderText("Search trạng thái...")).toBeNull();
   });
 });
+
+describe("MultiSelect", () => {
+  it("mở panel và chọn được nhiều option", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <MultiSelect
+        options={OPTIONS}
+        value={[]}
+        onValueChange={onValueChange}
+        placeholder="Chọn trạng thái"
+        searchPlaceholder="Tìm kiếm..."
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("combobox"));
+
+    const search = await screen.findByPlaceholderText("Tìm kiếm...");
+    expect(document.body.contains(search)).toBe(true);
+
+    fireEvent.click(screen.getByRole("option", { name: /Chờ duyệt/ }));
+    expect(onValueChange).toHaveBeenCalledWith(["pending"]);
+  });
+
+  it("tìm kiếm tiếng Việt không dấu và hỗ trợ ký tự đ/Đ", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <MultiSelect
+        options={OPTIONS}
+        value={[]}
+        onValueChange={onValueChange}
+        placeholder="Chọn trạng thái"
+        searchPlaceholder="Tìm kiếm..."
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("combobox"));
+    const search = await screen.findByPlaceholderText("Tìm kiếm...");
+
+    // Tìm "da" -> tìm thấy "Đã duyệt", loại trừ "Chờ duyệt" & "Từ chối"
+    fireEvent.change(search, { target: { value: "da" } });
+    await waitFor(() =>
+      expect(screen.queryByRole("option", { name: /Từ chối/ })).toBeNull(),
+    );
+    expect(screen.getByRole("option", { name: /Đã duyệt/ })).toBeTruthy();
+
+    // Tìm "duyet" -> tìm thấy "Chờ duyệt" và "Đã duyệt", loại trừ "Từ chối"
+    fireEvent.change(search, { target: { value: "duyet" } });
+    await waitFor(() =>
+      expect(screen.queryByRole("option", { name: /Từ chối/ })).toBeNull(),
+    );
+    expect(screen.getByRole("option", { name: /Chờ duyệt/ })).toBeTruthy();
+  });
+});

package/src/ui/primitives/combobox.tsx

@@ -24,6 +24,11 @@ interface ComboboxProps {
   disabled?: boolean;
   className?: string;
   id?: string;
+  /**
+   * Chế độ modal cho Popover (mặc định true). Bắt buộc bật true khi nằm trong
+   * Dialog / Sheet để tránh FocusTrap cướp focus khỏi ô tìm kiếm và hỗ trợ chạm trên mobile.
+   */
+  modal?: boolean;
   /**
    * 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.
@@ -31,6 +36,16 @@ interface ComboboxProps {
   maxHeight?: string;
 }
 
+const normalizeVietnamese = (str: string) => {
+  if (!str) return "";
+  return str
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[đĐ]/g, (m) => (m === "đ" ? "d" : "D"))
+    .toLowerCase()
+    .trim();
+};
+
 export function Combobox({
   options,
   value,
@@ -41,6 +56,7 @@ export function Combobox({
   disabled = false,
   className,
   id,
+  modal = true,
   maxHeight = "20rem",
 }: ComboboxProps) {
   const [open, setOpen] = useState(false);
@@ -51,17 +67,17 @@ export function Combobox({
     (option) => String(option.value) === String(value),
   );
 
-  // Filter options based on search value
+  // Filter options based on search value (hỗ trợ tiếng Việt không dấu & đ/Đ)
   const filteredOptions = useMemo(() => {
     if (!searchValue.trim()) {
       return options;
     }
-    const searchLower = searchValue.toLowerCase();
-    return options.filter(
-      (option) =>
-        option.label.toLowerCase().includes(searchLower) ||
-        String(option.value).toLowerCase().includes(searchLower),
-    );
+    const searchNorm = normalizeVietnamese(searchValue);
+    return options.filter((option) => {
+      const labelNorm = normalizeVietnamese(option.label);
+      const valueNorm = normalizeVietnamese(String(option.value));
+      return labelNorm.includes(searchNorm) || valueNorm.includes(searchNorm);
+    });
   }, [options, searchValue]);
 
   // Reset search when dropdown closes
@@ -95,6 +111,7 @@ export function Combobox({
 
   return (
     <Popover
+      modal={modal}
       open={open}
       onOpenChange={(next) => {
         if (disabled && next) return;
@@ -161,9 +178,17 @@ export function Combobox({
         collisionPadding={8}
         onOpenAutoFocus={(e) => {
           e.preventDefault();
-          searchInputRef.current?.focus();
+          // Trên thiết bị cảm ứng / màn hình nhỏ, không ép mở bàn phím ảo để tránh che khuất danh sách
+          const isTouchOrMobile =
+            typeof window !== "undefined" &&
+            ((typeof window.matchMedia === "function" &&
+              window.matchMedia("(pointer: coarse)").matches) ||
+              (typeof window.innerWidth === "number" && window.innerWidth < 640));
+          if (!isTouchOrMobile) {
+            searchInputRef.current?.focus();
+          }
         }}
-        className="z-[100] w-[var(--radix-popover-trigger-width)] min-w-[12rem] p-0 flex flex-col overflow-hidden"
+        className="z-[100] w-[var(--radix-popover-trigger-width)] min-w-[12rem] max-w-[calc(100vw-1rem)] p-0 flex flex-col overflow-hidden"
         style={{
           maxHeight: `min(${maxHeight}, var(--radix-popover-content-available-height, ${maxHeight}))`,
         }}
@@ -239,8 +264,6 @@ export function Combobox({
                     )}
                     onMouseDown={(e) => {
                       e.preventDefault();
-                      e.stopPropagation();
-                      handleSelect(option.value);
                     }}
                     onClick={(e) => {
                       e.preventDefault();

package/templates/starter-app/package.json

@@ -22,7 +22,7 @@
     "prepare": "husky || true"
   },
   "dependencies": {
-    "@goerp/core": "npm:@goplusvn/core@^0.1.71",
+    "@goerp/core": "npm:@goplusvn/core@^0.1.94",
     "@hookform/resolvers": "3.9.0",
     "@prisma/adapter-pg": "^7.0.0",
     "@prisma/client": "^7.0.0",