@goplusvn/core 0.1.98 → 0.1.100

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+## 0.1.100 — Cho phép cấu hình Inline Render (portal=false) cho Combobox & MultiSelect
+
+Khi Combobox hoặc MultiSelect nằm trong Modal/Dialog/Sheet, Radix Portal ra `document.body` khiến
+panel nằm ngoài DOM tree của Dialog cha, dẫn đến việc Radix Dialog gán `aria-hidden` và cướp focus
+của ô tìm kiếm.
+Bản này bổ sung prop `portal?: boolean` (mặc định `false`) trên `PopoverContent`, `Combobox` và `MultiSelect`,
+giúp panel render inline cùng DOM tree của Dialog/Sheet, giải quyết triệt để vấn đề mất focus trên cả Desktop và Mobile.
+
+**Đổi**
+
+- `ui/primitives/popover.tsx` — hỗ trợ prop `portal?: boolean` (mặc định `true`).
+- `ui/primitives/combobox.tsx` & `ui/forms/multi-select.tsx` — mặc định `portal = false` và `modal = false`.
+
+## 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.100",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

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

@@ -79,10 +79,15 @@ interface MultiSelectProps {
   /** 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.
+   * Chế độ modal cho Popover (mặc định false).
    */
   modal?: boolean;
+  /**
+   * Render qua Portal của Radix ra document.body (mặc định false).
+   * Mặc định false giúp panel nằm cùng DOM tree của Dialog/Sheet,
+   * tránh bị Radix Dialog gán aria-hidden và chặn focus/bàn phím.
+   */
+  portal?: boolean;
   className?: string;
   id?: string;
 }
@@ -212,7 +217,8 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       loadingText = "Đang tải...",
       className,
       id,
-      modal = true,
+      modal = false,
+      portal = false,
     },
     ref,
   ) => {
@@ -414,12 +420,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
@@ -730,10 +750,15 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
             align="start"
             sideOffset={4}
             collisionPadding={8}
+            portal={portal}
             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={{
               maxHeight:
@@ -755,7 +780,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/__tests__/combobox-portal.test.tsx

@@ -54,14 +54,12 @@ function renderInScrollBox(onValueChange = vi.fn()) {
 }
 
 describe("Combobox", () => {
-  it("mở panel ra ngoài hộp cuộn (portal), không bị hộp cha cắt", async () => {
+  it("mở panel và hiển thị ô tìm kiếm", async () => {
     renderInScrollBox();
     fireEvent.click(screen.getByRole("combobox"));
 
     const search = await screen.findByPlaceholderText("Search trạng thái...");
-    const scrollBox = screen.getByTestId("scroll-box");
-
-    expect(scrollBox.contains(search)).toBe(false);
+    expect(search).toBeTruthy();
     expect(document.body.contains(search)).toBe(true);
   });
 

package/src/ui/primitives/combobox.tsx

@@ -25,10 +25,15 @@ interface ComboboxProps {
   className?: string;
   id?: string;
   /**
-   * 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.
+   * Chế độ modal cho Popover (mặc định false).
    */
   modal?: boolean;
+  /**
+   * Render qua Portal của Radix ra document.body (mặc định false).
+   * Mặc định false giúp panel nằm cùng DOM tree của Dialog/Sheet,
+   * tránh bị Radix Dialog gán aria-hidden và chặn focus/bàn phím.
+   */
+  portal?: 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.
@@ -56,7 +61,8 @@ export function Combobox({
   disabled = false,
   className,
   id,
-  modal = true,
+  modal = false,
+  portal = false,
   maxHeight = "20rem",
 }: ComboboxProps) {
   const [open, setOpen] = useState(false);
@@ -80,11 +86,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(
@@ -176,10 +196,15 @@ export function Combobox({
         align="start"
         sideOffset={4}
         collisionPadding={8}
+        portal={portal}
         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={{
           maxHeight: `min(${maxHeight}, var(--radix-popover-content-available-height, ${maxHeight}))`,
@@ -195,7 +220,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/src/ui/primitives/popover.tsx

@@ -35,22 +35,32 @@ export function PopoverContent({
   align = "center",
   sideOffset = 4,
   container,
+  portal = true,
   ...props
 }: ComponentProps<typeof PopoverPrimitive.Content> & {
   container?: HTMLElement;
+  portal?: boolean;
 }) {
+  const content = (
+    <PopoverPrimitive.Content
+      data-slot="popover-content"
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+
+  if (!portal) {
+    return content;
+  }
+
   return (
     <PopoverPrimitive.Portal container={container}>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className,
-        )}
-        {...props}
-      />
+      {content}
     </PopoverPrimitive.Portal>
   );
 }

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.100",
     "@hookform/resolvers": "3.9.0",
     "@prisma/adapter-pg": "^7.0.0",
     "@prisma/client": "^7.0.0",