@goplusvn/core 0.1.93 → 0.1.95

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+## 0.1.95 — Triệt tiêu Hydration Mismatch trên AvatarFallback của UserDropdown
+
+Trong quá trình Server-Side Rendering (SSR), `useSafeAuthSession()` chưa có phiên đăng nhập
+của client, khiến server render ra AvatarFallback rỗng trong khi client hydrate ngay lập tức
+với initials của user (`"AV"`), dẫn đến lỗi Hydration Mismatch.
+
+**Đổi**
+
+- `ui/layout/user-dropdown.tsx` — thêm `suppressHydrationWarning` cho `AvatarFallback` ở nút trigger
+  và thông tin user trong dropdown menu content; xử lý initials an toàn chống lệch DOM giữa SSR & CSR.
+- `ui/layout/main-layout.tsx`, `vertical-layout.tsx`, `horizontal-layout.tsx`, `vertical-layout-header.tsx`,
+  `horizontal-layout-header.tsx` — bổ sung prop `user?: ExtendedUser | null` xuyên suốt, cho phép Server
+  Component truyền thông tin session user trực tiếp từ SSR xuống header, triệt tiêu hoàn toàn độ trễ và
+  lệch dữ liệu.
+
+## 0.1.94 — Hỗ trợ Nested Modal Layer cho Combobox/MultiSelect & Chuẩn hoá tìm kiếm Tiếng Việt
+
+Khi bộ lọc `Combobox` hoặc `MultiSelect` nằm trong `<Sheet>` (bộ lọc mobile) hoặc `<Dialog>`,
+Radix Dialog's `FocusScope` (modal Focus Trap) trước đây nhận diện ô tìm kiếm là phần tử lạ
+ngoài modal do Popover thiếu cấu hình `modal={true}`, dẫn đến việc cướp lại focus và chặn
+chạm trên Mobile. Đồng thời, tìm kiếm tiếng Việt trước đây không xử lý ký tự `đ` và `Đ`.
+
+**Đổi**
+
+- `ui/primitives/combobox.tsx` & `ui/forms/multi-select.tsx` — hỗ trợ prop `modal?: boolean`
+  (mặc định `true`), truyền vào `<Popover modal={modal}>` để biến Popover thành Nested Modal Layer
+  chuẩn Radix. Focus Trap của Sheet/Dialog cha sẽ tạm hoãn khi Popover mở, cho phép gõ tìm kiếm và
+  chọn option mượt mà trên Mobile & Desktop.
+- `ui/primitives/combobox.tsx` & `ui/forms/multi-select.tsx` — nâng cấp thuật toán chuẩn hóa
+  `normalizeVietnamese` (loại bỏ dấu NFD + chuyển đổi `đ/Đ` $\rightarrow$ `d/D`), hỗ trợ tìm kiếm không dấu
+  chính xác (ví dụ "da" tìm thấy "Đã duyệt", "don hang" tìm thấy "Hủy đơn hàng").
+- `ui/primitives/combobox.tsx` & `ui/forms/multi-select.tsx` — tối ưu `onOpenAutoFocus` trên thiết bị
+  cảm ứng / mobile ($< 640\text{px}$) tránh tự động bật bàn phím ảo che khuất options; bổ sung
+  `max-w-[calc(100vw-1rem)]` chống tràn màn hình điện thoại khi nằm trong lưới 2 cột.
+- `ui/primitives/__tests__/combobox-portal.test.tsx` — bổ sung unit test cho portal rendering,
+  tiếng Việt không dấu & có dấu với `đ/Đ` cho cả Combobox và MultiSelect.
+
 ## 0.1.93 — Triệt tiêu lỗi Hydration Mismatch do Dynamic Imports không đồng bộ SSR
 
 Trang CRUD (`EntityCrudPage`) gặp lỗi Hydration Mismatch trong Next.js / React 19:

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

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

@@ -78,6 +78,11 @@ interface MultiSelectProps {
   loadOptions?: (search: string) => Promise<MultiSelectOption[]>;
   /** 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.
+   */
+  modal?: boolean;
   className?: string;
   id?: string;
 }
@@ -134,20 +139,26 @@ const VIRTUALIZE_THRESHOLD = 200;
 const ITEM_HEIGHT = 32;
 const LIST_MAX_HEIGHT = 250;
 
-const stripAccents = (str: string) =>
-  str ? str.normalize("NFD").replace(/[\u0300-\u036f]/g, "") : "";
+const normalizeVietnamese = (str: string) =>
+  str
+    ? str
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f]/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) của query trong
+ * 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.
  */
 function findMatchRange(label: string, query: string): [number, number] | null {
-  const q = stripAccents(query.trim().toLowerCase());
+  const q = normalizeVietnamese(query.trim());
   if (!q || !label) return null;
   let stripped = "";
   const indexMap: number[] = [];
   for (let i = 0; i < label.length; i++) {
-    const s = stripAccents(label[i].toLowerCase());
+    const s = normalizeVietnamese(label[i]);
     for (let j = 0; j < s.length; j++) {
       stripped += s[j];
       indexMap.push(i);
@@ -193,6 +204,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       loadingText = "Đang tải...",
       className,
       id,
+      modal = true,
     },
     ref,
   ) => {
@@ -368,19 +380,15 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       if (!searchValue.trim()) {
         return sourceOptions;
       }
-      const searchLower = stripAccents(searchValue.toLowerCase());
+      const searchNorm = normalizeVietnamese(searchValue);
 
       return sourceOptions.filter((option) => {
-        const labelLower = option.label
-          ? stripAccents(option.label.toLowerCase())
-          : "";
-        const valueLower =
+        const labelNorm = normalizeVietnamese(option.label || "");
+        const valueNorm =
           option.value !== undefined && option.value !== null
-            ? stripAccents(String(option.value).toLowerCase())
+            ? normalizeVietnamese(String(option.value))
             : "";
-        return (
-          labelLower.includes(searchLower) || valueLower.includes(searchLower)
-        );
+        return labelNorm.includes(searchNorm) || valueNorm.includes(searchNorm);
       });
     }, [sourceOptions, searchValue, hasAsync]);
 
@@ -430,15 +438,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       }
     }, [highlightedIndex, isVirtual, open]);
 
-    // Focus search input when dropdown opens
-    useEffect(() => {
-      if (open && searchInputRef.current) {
-        // Small delay to ensure dropdown is rendered
-        setTimeout(() => {
-          searchInputRef.current?.focus();
-        }, 50);
-      }
-    }, [open]);
+
 
     // Click-ra-ngoài + Escape do DismissableLayer của Radix Popover lo (panel
     // đã đi qua Portal). Không tự nghe document nữa: hai lớp cùng đóng dễ
@@ -583,6 +583,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
 
     return (
       <Popover
+        modal={modal}
         open={open}
         onOpenChange={(next) => {
           if (disabled && next) return;
@@ -615,9 +616,6 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                 className,
               )}
               id={id}
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
             >
               <div
                 className={cn(
@@ -726,11 +724,21 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
             collisionPadding={8}
             onOpenAutoFocus={(e) => {
               e.preventDefault();
-              searchInputRef.current?.focus();
+              // Trên thiết bị cảm ứng / màn hình nhỏ, không ép mở bàn phím ảo để tránh che khuất danh sách
+              const isTouchOrMobile =
+                typeof window !== "undefined" &&
+                ((typeof window.matchMedia === "function" &&
+                  window.matchMedia("(pointer: coarse)").matches) ||
+                  (typeof window.innerWidth === "number" &&
+                    window.innerWidth < 640));
+              if (!isTouchOrMobile) {
+                searchInputRef.current?.focus();
+              }
             }}
-            className="z-[100] flex w-[var(--radix-popover-trigger-width)] min-w-[15rem] flex-col overflow-hidden rounded-md border bg-popover/95 p-0 text-popover-foreground shadow-lg shadow-black/5 backdrop-blur-md"
+            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: "var(--radix-popover-content-available-height, 24rem)",
+              maxHeight:
+                "min(24rem, var(--radix-popover-content-available-height, 24rem))",
             }}
           >
             <div className="flex min-h-0 flex-1 flex-col">

package/src/ui/layout/horizontal-layout-header.tsx

@@ -25,10 +25,12 @@ export function HorizontalLayoutHeader({
   dictionary,
   navigation,
   notificationSlot,
+  user,
 }: {
   dictionary: DictionaryType;
   navigation?: NavigationType[];
   notificationSlot?: ReactNode;
+  user?: any;
 }) {
   const params = useParams();
   const locale = params.lang as LocaleType;
@@ -78,7 +80,7 @@ export function HorizontalLayoutHeader({
             {/* <ModeDropdown dictionary={dictionary} /> */}
             {/* <LanguageDropdown dictionary={dictionary} /> */}
             {/* User dropdown */}
-            <UserDropdown dictionary={dictionary} locale={locale} />
+            <UserDropdown dictionary={dictionary} locale={locale} user={user} />
           </div>
         </div>
         <PageTabs dictionary={dictionary} />

package/src/ui/layout/horizontal-layout.tsx

@@ -17,6 +17,7 @@ interface HorizontalLayoutProps {
   searchResults?: any[];
   searchLoading?: boolean;
   notificationSlot?: ReactNode;
+  user?: any;
 }
 
 export function HorizontalLayout({
@@ -27,6 +28,7 @@ export function HorizontalLayout({
   searchResults,
   searchLoading,
   notificationSlot,
+  user,
 }: HorizontalLayoutProps) {
   return (
     <SidebarProvider>
@@ -42,6 +44,7 @@ export function HorizontalLayout({
           dictionary={dictionary}
           navigation={navigation}
           notificationSlot={notificationSlot}
+          user={user}
         />
         <main className="w-full mx-auto flex-1 min-h-0 px-4 md:px-8 py-4">
           {children}

package/src/ui/layout/main-layout.tsx

@@ -21,6 +21,11 @@ interface LayoutProps {
    * dropdown tĩnh cũ (backward-compat cho consumer chưa nối dữ liệu).
    */
   notificationSlot?: ReactNode;
+  /**
+   * Thông tin user đăng nhập (truyền từ Server Component session để triệt tiêu
+   * hoàn toàn độ trễ / hydration mismatch trên AvatarFallback ở header).
+   */
+  user?: any;
 }
 
 export function MainLayout({
@@ -31,6 +36,7 @@ export function MainLayout({
   searchResults,
   searchLoading,
   notificationSlot,
+  user,
 }: LayoutProps) {
   const mounted = useMounted();
   const isVertical = useIsVertical();
@@ -48,6 +54,7 @@ export function MainLayout({
       searchResults={searchResults}
       searchLoading={searchLoading}
       notificationSlot={notificationSlot}
+      user={user}
     >
       {children}
     </VerticalLayout>
@@ -59,6 +66,7 @@ export function MainLayout({
       searchResults={searchResults}
       searchLoading={searchLoading}
       notificationSlot={notificationSlot}
+      user={user}
     >
       {children}
     </HorizontalLayout>

package/src/ui/layout/user-dropdown.tsx

@@ -93,8 +93,11 @@ export function UserDropdown({
           alt={user?.name || ""}
           className="object-cover"
         />
-        <AvatarFallback className="bg-primary text-white text-[10px] font-bold uppercase">
-          {user?.name && getInitials(user.name)}
+        <AvatarFallback
+          className="bg-primary text-white text-[10px] font-bold uppercase"
+          suppressHydrationWarning
+        >
+          {user?.name ? getInitials(user.name) : null}
         </AvatarFallback>
       </Avatar>
     </Button>
@@ -116,15 +119,21 @@ export function UserDropdown({
         <DropdownMenuLabel className="flex gap-2 p-2">
           <Avatar className="size-8 border border-border/20 shadow-sm">
             <AvatarImage src={user?.avatar || undefined} alt="Avatar" />
-            <AvatarFallback className="bg-transparent">
-              {user?.name && getInitials(user.name)}
+            <AvatarFallback className="bg-transparent" suppressHydrationWarning>
+              {user?.name ? getInitials(user.name) : null}
             </AvatarFallback>
           </Avatar>
           <div className="flex flex-col min-w-0 space-y-0.5 overflow-hidden">
-            <p className="text-sm font-semibold text-foreground truncate leading-none">
+            <p
+              className="text-sm font-semibold text-foreground truncate leading-none"
+              suppressHydrationWarning
+            >
               {user?.name}
             </p>
-            <p className="text-[11px] text-muted-foreground truncate font-medium opacity-80 leading-none">
+            <p
+              className="text-[11px] text-muted-foreground truncate font-medium opacity-80 leading-none"
+              suppressHydrationWarning
+            >
               {user?.email}
             </p>
           </div>

package/src/ui/layout/vertical-layout-header.tsx

@@ -19,9 +19,11 @@ import { ToggleMobileSidebar } from "./toggle-mobile-sidebar";
 export function VerticalLayoutHeader({
   dictionary,
   notificationSlot,
+  user,
 }: {
   dictionary: DictionaryType;
   notificationSlot?: ReactNode;
+  user?: any;
 }) {
   const params = useParams();
   const locale = params.lang as LocaleType;
@@ -67,7 +69,7 @@ export function VerticalLayoutHeader({
           {/* <ModeDropdown dictionary={dictionary} /> */}
           {/* <LanguageDropdown dictionary={dictionary} /> */}
           {/* User dropdown */}
-          <UserDropdown dictionary={dictionary} locale={locale} />
+          <UserDropdown dictionary={dictionary} locale={locale} user={user} />
         </div>
       </div>
     </header>

package/src/ui/layout/vertical-layout.tsx

@@ -17,6 +17,7 @@ interface VerticalLayoutProps {
   searchResults?: any[];
   searchLoading?: boolean;
   notificationSlot?: ReactNode;
+  user?: any;
 }
 
 export function VerticalLayout({
@@ -27,6 +28,7 @@ export function VerticalLayout({
   searchResults,
   searchLoading,
   notificationSlot,
+  user,
 }: VerticalLayoutProps) {
   return (
     <SidebarProvider>
@@ -41,6 +43,7 @@ export function VerticalLayout({
         <VerticalLayoutHeader
           dictionary={dictionary}
           notificationSlot={notificationSlot}
+          user={user}
         />
         {/* `h-dvh` ở SidebarInset (không phải `h-screen`): trên Safari/Chrome
             mobile 100vh tính CẢ thanh URL co giãn, nên đáy trang — phân trang,

package/src/ui/primitives/__tests__/combobox-portal.test.tsx

@@ -2,9 +2,10 @@ import { describe, expect, it, vi, beforeAll } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 
 import { Combobox } from "../combobox";
+import { MultiSelect } from "../../forms/multi-select";
 
 /**
- * Panel của Combobox PHẢI nằm ngoài hộp cuộn của form/dialog.
+ * Panel của Combobox và MultiSelect PHẢI nằm ngoài hộp cuộn của form/dialog.
  *
  * Lỗi cũ: panel là `position: absolute` con của trigger, nên khi combo nằm
  * trong CrudDialog (thân dialog `overflow-y-auto`) thì danh sách bị CẮT ở mép
@@ -69,14 +70,39 @@ describe("Combobox", () => {
     fireEvent.click(screen.getByRole("combobox"));
 
     const search = await screen.findByPlaceholderText("Search trạng thái...");
-    fireEvent.change(search, { target: { value: "chờ" } });
+    fireEvent.change(search, { target: { value: "chờ duyệt" } });
 
-    await waitFor(() => expect(screen.queryByText("Từ chối")).toBeNull());
+    await waitFor(() =>
+      expect(screen.queryByRole("option", { name: "Từ chối" })).toBeNull(),
+    );
 
-    fireEvent.click(screen.getByText("Chờ duyệt"));
+    fireEvent.click(screen.getByRole("option", { name: "Chờ duyệt" }));
     expect(onValueChange).toHaveBeenCalledWith("pending");
   });
 
+  it("lọc theo từ khoá tiếng Việt không dấu và đ/Đ", async () => {
+    const { onValueChange } = renderInScrollBox();
+    fireEvent.click(screen.getByRole("combobox"));
+
+    const search = await screen.findByPlaceholderText("Search trạng thái...");
+    // Gõ "duyet" không dấu -> "Từ chối" bị loại bỏ, tìm thấy "Chờ duyệt"
+    fireEvent.change(search, { target: { value: "duyet" } });
+    await waitFor(() =>
+      expect(screen.queryByRole("option", { name: "Từ chối" })).toBeNull(),
+    );
+    expect(screen.getByRole("option", { name: "Chờ duyệt" })).toBeTruthy();
+
+    // Gõ "da" -> tìm thấy "Đã duyệt" (xử lý đ/Đ), "Chờ duyệt" bị loại bỏ
+    fireEvent.change(search, { target: { value: "da" } });
+    await waitFor(() =>
+      expect(screen.queryByRole("option", { name: "Chờ duyệt" })).toBeNull(),
+    );
+    expect(screen.getByRole("option", { name: "Đã duyệt" })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("option", { name: "Đã duyệt" }));
+    expect(onValueChange).toHaveBeenCalledWith("approved");
+  });
+
   it("nút xoá trên trigger trả về undefined mà không mở panel", async () => {
     const { onValueChange } = renderInScrollBox();
     const clear = screen
@@ -89,3 +115,56 @@ describe("Combobox", () => {
     expect(screen.queryByPlaceholderText("Search trạng thái...")).toBeNull();
   });
 });
+
+describe("MultiSelect", () => {
+  it("mở panel và chọn được nhiều option", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <MultiSelect
+        options={OPTIONS}
+        value={[]}
+        onValueChange={onValueChange}
+        placeholder="Chọn trạng thái"
+        searchPlaceholder="Tìm kiếm..."
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("combobox"));
+
+    const search = await screen.findByPlaceholderText("Tìm kiếm...");
+    expect(document.body.contains(search)).toBe(true);
+
+    fireEvent.click(screen.getByRole("option", { name: /Chờ duyệt/ }));
+    expect(onValueChange).toHaveBeenCalledWith(["pending"]);
+  });
+
+  it("tìm kiếm tiếng Việt không dấu và hỗ trợ ký tự đ/Đ", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <MultiSelect
+        options={OPTIONS}
+        value={[]}
+        onValueChange={onValueChange}
+        placeholder="Chọn trạng thái"
+        searchPlaceholder="Tìm kiếm..."
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("combobox"));
+    const search = await screen.findByPlaceholderText("Tìm kiếm...");
+
+    // Tìm "da" -> tìm thấy "Đã duyệt", loại trừ "Chờ duyệt" & "Từ chối"
+    fireEvent.change(search, { target: { value: "da" } });
+    await waitFor(() =>
+      expect(screen.queryByRole("option", { name: /Từ chối/ })).toBeNull(),
+    );
+    expect(screen.getByRole("option", { name: /Đã duyệt/ })).toBeTruthy();
+
+    // Tìm "duyet" -> tìm thấy "Chờ duyệt" và "Đã duyệt", loại trừ "Từ chối"
+    fireEvent.change(search, { target: { value: "duyet" } });
+    await waitFor(() =>
+      expect(screen.queryByRole("option", { name: /Từ chối/ })).toBeNull(),
+    );
+    expect(screen.getByRole("option", { name: /Chờ duyệt/ })).toBeTruthy();
+  });
+});

package/src/ui/primitives/combobox.tsx

@@ -24,6 +24,11 @@ interface ComboboxProps {
   disabled?: boolean;
   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.
+   */
+  modal?: 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.
@@ -31,6 +36,16 @@ interface ComboboxProps {
   maxHeight?: string;
 }
 
+const normalizeVietnamese = (str: string) => {
+  if (!str) return "";
+  return str
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/[đĐ]/g, (m) => (m === "đ" ? "d" : "D"))
+    .toLowerCase()
+    .trim();
+};
+
 export function Combobox({
   options,
   value,
@@ -41,6 +56,7 @@ export function Combobox({
   disabled = false,
   className,
   id,
+  modal = true,
   maxHeight = "20rem",
 }: ComboboxProps) {
   const [open, setOpen] = useState(false);
@@ -51,17 +67,17 @@ export function Combobox({
     (option) => String(option.value) === String(value),
   );
 
-  // Filter options based on search value
+  // Filter options based on search value (hỗ trợ tiếng Việt không dấu & đ/Đ)
   const filteredOptions = useMemo(() => {
     if (!searchValue.trim()) {
       return options;
     }
-    const searchLower = searchValue.toLowerCase();
-    return options.filter(
-      (option) =>
-        option.label.toLowerCase().includes(searchLower) ||
-        String(option.value).toLowerCase().includes(searchLower),
-    );
+    const searchNorm = normalizeVietnamese(searchValue);
+    return options.filter((option) => {
+      const labelNorm = normalizeVietnamese(option.label);
+      const valueNorm = normalizeVietnamese(String(option.value));
+      return labelNorm.includes(searchNorm) || valueNorm.includes(searchNorm);
+    });
   }, [options, searchValue]);
 
   // Reset search when dropdown closes
@@ -95,6 +111,7 @@ export function Combobox({
 
   return (
     <Popover
+      modal={modal}
       open={open}
       onOpenChange={(next) => {
         if (disabled && next) return;
@@ -161,9 +178,17 @@ export function Combobox({
         collisionPadding={8}
         onOpenAutoFocus={(e) => {
           e.preventDefault();
-          searchInputRef.current?.focus();
+          // Trên thiết bị cảm ứng / màn hình nhỏ, không ép mở bàn phím ảo để tránh che khuất danh sách
+          const isTouchOrMobile =
+            typeof window !== "undefined" &&
+            ((typeof window.matchMedia === "function" &&
+              window.matchMedia("(pointer: coarse)").matches) ||
+              (typeof window.innerWidth === "number" && window.innerWidth < 640));
+          if (!isTouchOrMobile) {
+            searchInputRef.current?.focus();
+          }
         }}
-        className="z-[100] w-[var(--radix-popover-trigger-width)] min-w-[12rem] p-0 flex flex-col overflow-hidden"
+        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}))`,
         }}
@@ -239,8 +264,6 @@ export function Combobox({
                     )}
                     onMouseDown={(e) => {
                       e.preventDefault();
-                      e.stopPropagation();
-                      handleSelect(option.value);
                     }}
                     onClick={(e) => {
                       e.preventDefault();

package/templates/starter-app/package.json

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