@goplusvn/core 0.1.98 → 0.1.99

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 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),

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

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

@@ -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
@@ -734,6 +748,10 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
               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={{
               maxHeight:
@@ -755,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

@@ -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(
@@ -180,6 +194,10 @@ export function Combobox({
           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={{
           maxHeight: `min(${maxHeight}, var(--radix-popover-content-available-height, ${maxHeight}))`,
@@ -195,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.98",
+    "@goerp/core": "npm:@goplusvn/core@^0.1.99",
     "@hookform/resolvers": "3.9.0",
     "@prisma/adapter-pg": "^7.0.0",
     "@prisma/client": "^7.0.0",