@goplusvn/core 0.1.97 → 0.1.99

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 0.1.99 — Native Event Isolation ngăn chặn hoàn toàn việc Dialog/Sheet cha cướp focus của ô tìm kiếm
+
+Khi người dùng click hoặc chạm vào ô tìm kiếm hoặc danh sách của Popover nằm trong Dialog/Sheet/Modal,
+Radix Dialog trên document lắng nghe native pointerdown/touchstart và gọi preventDefault().
+Bằng cách cô lập native event trên cả PopoverContent và SearchInputRef (pointerdown, mousedown, touchstart),
+Dialog cha không bao giờ can thiệp vào các thao tác chạm/click/focus bên trong dropdown.
+
+**Đổi**
+
+- `ui/primitives/combobox.tsx` & `ui/forms/multi-select.tsx` — bổ sung native event listener `stopPropagation`
+  cho `searchInputRef` và `onPointerDownCapture` trên `PopoverContent` + `Input`.
+
+## 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

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

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

@@ -212,7 +212,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       loadingText = "Đang tải...",
       className,
       id,
-      modal = false,
+      modal = true,
     },
     ref,
   ) => {
@@ -414,12 +414,26 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       return { start, end };
     }, [isVirtual, scrollTop, filteredOptions.length]);
 
-    // Reset search when dropdown closes
+    // Reset search when dropdown closes + Native event isolation cho ô search input
+    // Ngăn Radix Dialog's DismissableLayer bắt native pointerdown/touchstart trên document
+    // và gọi preventDefault() làm mất focus khi ô input nằm trong Dialog/Sheet/Modal.
     useEffect(() => {
       if (!open) {
         setSearchValue("");
         setScrollTop(0);
+        return;
       }
+      const el = searchInputRef.current;
+      if (!el) return;
+      const stop = (e: Event) => e.stopPropagation();
+      el.addEventListener("pointerdown", stop);
+      el.addEventListener("mousedown", stop);
+      el.addEventListener("touchstart", stop);
+      return () => {
+        el.removeEventListener("pointerdown", stop);
+        el.removeEventListener("mousedown", stop);
+        el.removeEventListener("touchstart", stop);
+      };
     }, [open]);
 
     // Reset highlight khi mở/lọc thay đổi
@@ -732,6 +746,11 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
             collisionPadding={8}
             onOpenAutoFocus={(e) => {
               e.preventDefault();
+              searchInputRef.current?.focus();
+            }}
+            onPointerDownCapture={(e) => {
+              // Native event isolation: ngăn Dialog/Sheet cha bắt pointerdown trên document và gọi preventDefault()
+              e.stopPropagation();
             }}
             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,7 +773,13 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                   onChange={(e) => {
                     setSearchValue(e.target.value);
                   }}
-                  onPointerDown={(e) => {
+                  onPointerDownCapture={(e) => {
+                    e.stopPropagation();
+                  }}
+                  onMouseDownCapture={(e) => {
+                    e.stopPropagation();
+                  }}
+                  onTouchStartCapture={(e) => {
                     e.stopPropagation();
                   }}
                   onKeyDown={(e) => {

package/src/ui/primitives/combobox.tsx

@@ -25,8 +25,8 @@ interface ComboboxProps {
   className?: string;
   id?: string;
   /**
-   * 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.
+   * 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;
   /**
@@ -56,7 +56,7 @@ export function Combobox({
   disabled = false,
   className,
   id,
-  modal = false,
+  modal = true,
   maxHeight = "20rem",
 }: ComboboxProps) {
   const [open, setOpen] = useState(false);
@@ -80,11 +80,25 @@ export function Combobox({
     });
   }, [options, searchValue]);
 
-  // Reset search when dropdown closes
+  // Reset search when dropdown closes + Native event isolation cho ô search input
+  // Ngăn Radix Dialog's DismissableLayer bắt native pointerdown/touchstart trên document
+  // và gọi preventDefault() làm mất focus khi ô input nằm trong Dialog/Sheet/Modal.
   useEffect(() => {
     if (!open) {
       setSearchValue("");
+      return;
     }
+    const el = searchInputRef.current;
+    if (!el) return;
+    const stop = (e: Event) => e.stopPropagation();
+    el.addEventListener("pointerdown", stop);
+    el.addEventListener("mousedown", stop);
+    el.addEventListener("touchstart", stop);
+    return () => {
+      el.removeEventListener("pointerdown", stop);
+      el.removeEventListener("mousedown", stop);
+      el.removeEventListener("touchstart", stop);
+    };
   }, [open]);
 
   const handleSelect = useCallback(
@@ -178,6 +192,11 @@ export function Combobox({
         collisionPadding={8}
         onOpenAutoFocus={(e) => {
           e.preventDefault();
+          searchInputRef.current?.focus();
+        }}
+        onPointerDownCapture={(e) => {
+          // Native event isolation: ngăn Dialog/Sheet cha bắt pointerdown trên document và gọi preventDefault()
+          e.stopPropagation();
         }}
         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={{
@@ -194,7 +213,13 @@ export function Combobox({
             onChange={(e) => {
               setSearchValue(e.target.value);
             }}
-            onPointerDown={(e) => {
+            onPointerDownCapture={(e) => {
+              e.stopPropagation();
+            }}
+            onMouseDownCapture={(e) => {
+              e.stopPropagation();
+            }}
+            onTouchStartCapture={(e) => {
               e.stopPropagation();
             }}
             onKeyDown={(e) => {

package/templates/starter-app/package.json

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