@goplusvn/core 0.1.99 → 0.1.100

package/CHANGELOG.md

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

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.99",
+  "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,
   ) => {
@@ -744,6 +750,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
             align="start"
             sideOffset={4}
             collisionPadding={8}
+            portal={portal}
             onOpenAutoFocus={(e) => {
               e.preventDefault();
               searchInputRef.current?.focus();

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);
@@ -190,6 +196,7 @@ export function Combobox({
         align="start"
         sideOffset={4}
         collisionPadding={8}
+        portal={portal}
         onOpenAutoFocus={(e) => {
           e.preventDefault();
           searchInputRef.current?.focus();

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.99",
+    "@goerp/core": "npm:@goplusvn/core@^0.1.100",
     "@hookform/resolvers": "3.9.0",
     "@prisma/adapter-pg": "^7.0.0",
     "@prisma/client": "^7.0.0",