@goplusvn/core 0.1.95 → 0.1.97

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## 0.1.97 — Sửa triệt để tương tác chạm và nhập liệu cho ô tìm kiếm Combobox/MultiSelect
+
+Khi `modal={true}` được bật mặc định, Radix Popover kích hoạt FocusScope + ScrollLock
+khiến thiết bị cảm ứng (Mobile/Tablet) và các trình duyệt bị xung đột:
+chạm vào ô tìm kiếm không mở được bàn phím ảo hoặc bị đóng dropdown / mất focus.
+
+**Đổi**
+
+- `ui/primitives/combobox.tsx` & `ui/forms/multi-select.tsx` — chuyển `modal` về mặc định `false`,
+  loại bỏ `e.stopPropagation()` trên `onFocus`/`onClick` của `Input`, thêm `onPointerDown={(e) => e.stopPropagation()}`
+  để input nhận focus tự nhiên và kích hoạt bàn phím ảo mượt mà trên mọi thiết bị.
+- `ui/forms/multi-select.tsx` — sửa hàm `findMatchRange` xử lý chính xác ký tự khoảng trắng khi highlight.
+
+## 0.1.96 — Sửa lỗi Focus Trap khiến ô tìm kiếm Combobox/MultiSelect mất focus khi lồng trong Sheet/Dialog
+
+Khi `Combobox` hoặc `MultiSelect` nằm trong `<Sheet>` (bộ lọc mobile) hoặc `<Dialog>`,
+Radix Dialog's `FocusScope` bắt sự kiện tương tác trên Portal và giật focus ngược lại về trigger,
+khiến ô input tìm kiếm bị blur ngay lập tức và không thể gõ được trên một số thiết bị/trình duyệt.
+
+**Đổi**
+
+- `ui/primitives/combobox.tsx` & `ui/forms/multi-select.tsx` — thêm `onFocusOutside={(e) => e.preventDefault()}`
+  trên `PopoverContent`, ngăn Dialog/Sheet cha cướp focus khỏi ô tìm kiếm; kích hoạt focus trực tiếp vào
+  `searchInputRef` khi mở panel.
+
 ## 0.1.95 — Triệt tiêu Hydration Mismatch trên AvatarFallback của UserDropdown
 
 Trong quá trình Server-Side Rendering (SSR), `useSafeAuthSession()` chưa có phiên đăng nhậ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.95",
+  "version": "0.1.97",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

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

@@ -148,6 +148,14 @@ const normalizeVietnamese = (str: string) =>
         .toLowerCase()
     : "";
 
+const normalizeVietnameseChar = (char: string) => {
+  return char
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f\u031b\u0323]/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, hỗ trợ đ/Đ) của query trong
  * label GỐC — trả về [start, end) trên chuỗi gốc để highlight.
@@ -158,7 +166,7 @@ function findMatchRange(label: string, query: string): [number, number] | null {
   let stripped = "";
   const indexMap: number[] = [];
   for (let i = 0; i < label.length; i++) {
-    const s = normalizeVietnamese(label[i]);
+    const s = normalizeVietnameseChar(label[i]);
     for (let j = 0; j < s.length; j++) {
       stripped += s[j];
       indexMap.push(i);
@@ -204,7 +212,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       loadingText = "Đang tải...",
       className,
       id,
-      modal = true,
+      modal = false,
     },
     ref,
   ) => {
@@ -724,16 +732,6 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
             collisionPadding={8}
             onOpenAutoFocus={(e) => {
               e.preventDefault();
-              // 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] 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={{
@@ -754,9 +752,11 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                   placeholder={searchPlaceholder}
                   value={searchValue}
                   onChange={(e) => {
-                    e.stopPropagation();
                     setSearchValue(e.target.value);
                   }}
+                  onPointerDown={(e) => {
+                    e.stopPropagation();
+                  }}
                   onKeyDown={(e) => {
                     // Prevent Dialog from intercepting keyboard events
                     e.stopPropagation();
@@ -783,12 +783,6 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                       updateValue(value.slice(0, -1));
                     }
                   }}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                  }}
-                  onFocus={(e) => {
-                    e.stopPropagation();
-                  }}
                   className="border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-7 bg-transparent px-0 text-sm shadow-none"
                 />
                 {searchValue && (

package/src/ui/primitives/combobox.tsx

@@ -25,8 +25,8 @@ interface ComboboxProps {
   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.
+   * Chế độ modal cho Popover (mặc định false). Mặc định false giúp ô tìm kiếm
+   * nhận focus và bật bàn phím ảo mượt mà trên mobile/sheet mà không bị kẹt focus trap.
    */
   modal?: boolean;
   /**
@@ -56,7 +56,7 @@ export function Combobox({
   disabled = false,
   className,
   id,
-  modal = true,
+  modal = false,
   maxHeight = "20rem",
 }: ComboboxProps) {
   const [open, setOpen] = useState(false);
@@ -178,15 +178,6 @@ export function Combobox({
         collisionPadding={8}
         onOpenAutoFocus={(e) => {
           e.preventDefault();
-          // 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] max-w-[calc(100vw-1rem)] p-0 flex flex-col overflow-hidden"
         style={{
@@ -201,9 +192,11 @@ export function Combobox({
             placeholder={searchPlaceholder}
             value={searchValue}
             onChange={(e) => {
-              e.stopPropagation();
               setSearchValue(e.target.value);
             }}
+            onPointerDown={(e) => {
+              e.stopPropagation();
+            }}
             onKeyDown={(e) => {
               // Prevent Dialog from intercepting keyboard events
               e.stopPropagation();
@@ -220,10 +213,7 @@ export function Combobox({
                 }
               }
             }}
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            className="border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-9 bg-transparent px-0"
+            className="border-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-9 bg-transparent px-0 text-sm"
           />
           {searchValue && (
             <Button

package/templates/starter-app/package.json

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