🐛 fix: resolve BaseUI dropdown compatibility issue (#11248)

* 🐛 fix: resolve BaseUI dropdown compatibility issue - Upgrade @lobehub/ui from 4.9.0 to 4.9.3 - Add nativeButton={false} prop to all DropdownMenu components to fix compatibility - Affects multiple components across chat, group, home, page, resource features Fixes: LOBE-2540 * update
2026-03-27 13:29:15 +07:00 · 2026-01-05 19:49:20 +08:00
parent 9eace1c0c7
commit 065bfec19b
14 changed files with 16 additions and 22 deletions
--- a/package.json
+++ b/package.json
@@ -205,7 +205,7 @@
    "@lobehub/icons": "^4.0.2",
    "@lobehub/market-sdk": "^0.25.1",
    "@lobehub/tts": "^4.0.2",
-    "@lobehub/ui": "^4.9.0",
+    "@lobehub/ui": "^4.9.3",
    "@modelcontextprotocol/sdk": "^1.25.1",
    "@neondatabase/serverless": "^1.0.2",
    "@next/third-parties": "^16.1.1",
--- a/src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/List/Item/Actions.tsx
+++ b/src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/List/Item/Actions.tsx
@@ -8,7 +8,7 @@ interface ActionProps {

 const Actions = memo<ActionProps>(({ dropdownMenu }) => {
  return (
-    <DropdownMenu items={dropdownMenu}>
+    <DropdownMenu items={dropdownMenu} nativeButton={false}>
      <ActionIcon icon={MoreHorizontalIcon} size={'small'} />
    </DropdownMenu>
  );
--- a/src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/TopicListContent/ThreadList/ThreadItem/Actions.tsx
+++ b/src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/TopicListContent/ThreadList/ThreadItem/Actions.tsx
@@ -8,7 +8,7 @@ interface ActionProps {

 const Actions = memo<ActionProps>(({ dropdownMenu }) => {
  return (
-    <DropdownMenu items={dropdownMenu}>
+    <DropdownMenu items={dropdownMenu} nativeButton={false}>
      <ActionIcon icon={MoreHorizontalIcon} size={'small'} />
    </DropdownMenu>
  );
--- a/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/List/Item/Actions.tsx
+++ b/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/List/Item/Actions.tsx
@@ -8,7 +8,7 @@ interface ActionProps {

 const Actions = memo<ActionProps>(({ dropdownMenu }) => {
  return (
-    <DropdownMenu items={dropdownMenu}>
+    <DropdownMenu items={dropdownMenu} nativeButton={false}>
      <ActionIcon icon={MoreHorizontalIcon} size={'small'} />
    </DropdownMenu>
  );
--- a/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/TopicListContent/ThreadList/ThreadItem/Actions.tsx
+++ b/src/app/[variants]/(main)/group/_layout/Sidebar/Topic/TopicListContent/ThreadList/ThreadItem/Actions.tsx
@@ -8,7 +8,7 @@ interface ActionProps {

 const Actions = memo<ActionProps>(({ dropdownMenu }) => {
  return (
-    <DropdownMenu items={dropdownMenu}>
+    <DropdownMenu items={dropdownMenu} nativeButton={false}>
      <ActionIcon icon={MoreHorizontalIcon} size={'small'} />
    </DropdownMenu>
  );
--- a/src/app/[variants]/(main)/home/_layout/Body/Agent/List/Item/Actions.tsx
+++ b/src/app/[variants]/(main)/home/_layout/Body/Agent/List/Item/Actions.tsx
@@ -8,7 +8,7 @@ interface ActionProps {

 const Actions = memo<ActionProps>(({ dropdownMenu }) => {
  return (
-    <DropdownMenu items={dropdownMenu}>
+    <DropdownMenu items={dropdownMenu} nativeButton={false}>
      <ActionIcon icon={MoreHorizontalIcon} size={'small'} />
    </DropdownMenu>
  );
--- a/src/app/[variants]/(main)/home/_layout/Body/Project/List/Actions.tsx
+++ b/src/app/[variants]/(main)/home/_layout/Body/Project/List/Actions.tsx
@@ -8,7 +8,7 @@ interface ActionsProps {

 const Actions = memo<ActionsProps>(({ dropdownMenu }) => {
  return (
-    <DropdownMenu items={dropdownMenu}>
+    <DropdownMenu items={dropdownMenu} nativeButton={false}>
      <ActionIcon icon={MoreHorizontalIcon} size={'small'} />
    </DropdownMenu>
  );
--- a/src/app/[variants]/(main)/home/_layout/Footer/index.tsx
+++ b/src/app/[variants]/(main)/home/_layout/Footer/index.tsx
@@ -1,7 +1,7 @@
 'use client';

 import { BRANDING_EMAIL, SOCIAL_URL } from '@lobechat/business-const';
-import { ActionIcon, Dropdown, Icon, type MenuProps } from '@lobehub/ui';
+import { ActionIcon, DropdownMenu, Icon, type MenuProps } from '@lobehub/ui';
 import { Flexbox } from '@lobehub/ui';
 import { DiscordIcon } from '@lobehub/ui/icons';
 import { Book, CircleHelp, Feather, FileClockIcon, FlaskConical, Github, Mail } from 'lucide-react';
@@ -103,15 +103,9 @@ const Footer = memo(() => {
    <>
      <Flexbox align={'center'} gap={2} horizontal justify={'space-between'} padding={8}>
        <Flexbox align={'center'} flex={1} gap={2} horizontal>
-          <Dropdown
-            menu={{
-              items: helpMenuItems,
-            }}
-            placement="topLeft"
-            trigger={['click']}
-          >
+          <DropdownMenu items={helpMenuItems} nativeButton={false} placement="topLeft">
            <ActionIcon aria-label={t('userPanel.help')} icon={CircleHelp} size={16} />
-          </Dropdown>
+          </DropdownMenu>
          {!hideGitHub && (
            <a aria-label={'GitHub'} href={GITHUB} rel="noopener noreferrer" target={'_blank'}>
              <ActionIcon icon={Github} size={16} title={'GitHub'} />
--- a/src/app/[variants]/(main)/home/_layout/Header/components/AddButton.tsx
+++ b/src/app/[variants]/(main)/home/_layout/Header/components/AddButton.tsx
@@ -44,7 +44,7 @@ const AddButton = memo(() => {
        size={DESKTOP_HEADER_ICON_SIZE}
        title={tChat('newAgent')}
      />
-      <DropdownMenu items={dropdownItems}>
+      <DropdownMenu items={dropdownItems} nativeButton={false}>
        <ActionIcon
          color={cssVar.colorTextQuaternary}
          icon={ChevronDownIcon}
--- a/src/app/[variants]/(main)/page/_layout/Body/List/Item/Actions.tsx
+++ b/src/app/[variants]/(main)/page/_layout/Body/List/Item/Actions.tsx
@@ -8,7 +8,7 @@ interface ActionProps {

 const Actions = memo<ActionProps>(({ dropdownMenu }) => {
  return (
-    <DropdownMenu items={dropdownMenu}>
+    <DropdownMenu items={dropdownMenu} nativeButton={false}>
      <ActionIcon icon={MoreHorizontalIcon} size={'small'} />
    </DropdownMenu>
  );
--- a/src/app/[variants]/(main)/resource/(home)/_layout/Body/LibraryList/List/Item/Actions.tsx
+++ b/src/app/[variants]/(main)/resource/(home)/_layout/Body/LibraryList/List/Item/Actions.tsx
@@ -8,7 +8,7 @@ interface ActionProps {

 const Actions = memo<ActionProps>(({ dropdownMenu }) => {
  return (
-    <DropdownMenu items={dropdownMenu}>
+    <DropdownMenu items={dropdownMenu} nativeButton={false}>
      <ActionIcon icon={MoreHorizontalIcon} size={'small'} />
    </DropdownMenu>
  );
--- a/src/features/PageEditor/Copilot/TopicSelector/Actions.tsx
+++ b/src/features/PageEditor/Copilot/TopicSelector/Actions.tsx
@@ -11,7 +11,7 @@ const Actions = memo<ActionsProps>(({ dropdownMenu }) => {
    return null;

  return (
-    <DropdownMenu items={dropdownMenu}>
+    <DropdownMenu items={dropdownMenu} nativeButton={false}>
      <ActionIcon icon={MoreHorizontalIcon} size={'small'} />
    </DropdownMenu>
  );
--- a/src/features/ResourceManager/components/Explorer/ItemDropdown/DropdownMenu.tsx
+++ b/src/features/ResourceManager/components/Explorer/ItemDropdown/DropdownMenu.tsx
@@ -10,7 +10,7 @@ interface DropdownMenuProps {

 const DropdownMenu = memo<DropdownMenuProps>(({ items, className }) => {
  return (
-    <DropdownMenuUI items={items}>
+    <DropdownMenuUI items={items} nativeButton={false}>
      <ActionIcon className={className} icon={MoreHorizontalIcon} size={'small'} />
    </DropdownMenuUI>
  );
--- a/src/features/User/UserPanel/ThemeButton.tsx
+++ b/src/features/User/UserPanel/ThemeButton.tsx
@@ -43,7 +43,7 @@ const ThemeButton: FC<{ placement?: DropdownMenuProps['placement']; size?: numbe
  );

  return (
-    <DropdownMenu items={items} placement={placement}>
+    <DropdownMenu items={items} nativeButton={false} placement={placement}>
      <ActionIcon
        icon={themeIcons[(theme as 'dark' | 'light' | 'system') || 'system']}
        size={size || { blockSize: 32, size: 16 }}