@goplusvn/core 0.1.96 → 0.1.98

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## 0.1.98 — Chuẩn hóa Modal FocusScope cho Combobox/MultiSelect khi nằm trong Dialog/Sheet/Modal
+
+Khi Combobox hoặc MultiSelect nằm trong Modal/Dialog/Sheet (như Modal thanh toán POS hay Sheet bộ lọc nâng cao),
+cơ chế FocusScope Stack của Radix yêu cầu `modal={true}` kết hợp với auto-focus vào `searchInputRef`
+và loại bỏ hoàn toàn các rào cản `stopPropagation` trên `onFocus`/`onClick` của Input.
+
+**Đổi**
+
+- `ui/primitives/combobox.tsx` & `ui/forms/multi-select.tsx` — kích hoạt `modal={true}` mặc định,
+  tự động focus vào `searchInputRef` khi mở dropdown, bổ sung `onPointerDown` stopPropagation trên Input
+  để người dùng click/chạm vào ô tìm kiếm lập tức nhận con trỏ nhập liệu và bật bàn phím.
+
+## 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>`,

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.96",
+  "version": "0.1.98",
   "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);
@@ -726,10 +734,6 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
               e.preventDefault();
               searchInputRef.current?.focus();
             }}
-            onFocusOutside={(e) => {
-              // Ngăn Dialog / Sheet cha giật focus khỏi ô tìm kiếm của Popover portal
-              e.preventDefault();
-            }}
             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:
@@ -749,9 +753,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();
@@ -778,12 +784,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 true). Bắt buộc true để kích hoạt
+   * FocusScope Stack của Radix khi nằm trong Dialog/Sheet/Modal.
    */
   modal?: boolean;
   /**
@@ -180,10 +180,6 @@ export function Combobox({
           e.preventDefault();
           searchInputRef.current?.focus();
         }}
-        onFocusOutside={(e) => {
-          // Ngăn Dialog / Sheet cha giật focus khỏi ô tìm kiếm của Popover portal
-          e.preventDefault();
-        }}
         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}))`,
@@ -197,9 +193,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();
@@ -216,10 +214,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.96",
+    "@goerp/core": "npm:@goplusvn/core@^0.1.98",
     "@hookform/resolvers": "3.9.0",
     "@prisma/adapter-pg": "^7.0.0",
     "@prisma/client": "^7.0.0",