🐛 fix(base-ui): prevent switch item stealing highlight in dropdown/context menu

antd Switch button grabs native focus on click; the focus event bubbles to Menu.Item where Floating UI's useListNavigation syncs activeIndex, leaving the item highlighted after reopen. Wrap Switch in a focus-stopping span and mark it tabIndex=-1 so it no longer drives menu activeIndex.

Author: Innei

src/DropdownMenu/demos/switch-mixed.tsx

@@ -0,0 +1,47 @@
+import { ActionIcon, DropdownMenu } from '@lobehub/ui';
+import {
+  CopyIcon,
+  HashIcon,
+  Maximize2Icon,
+  MoreHorizontalIcon,
+  PencilIcon,
+  SparklesIcon,
+  StarIcon,
+  TrashIcon,
+} from 'lucide-react';
+import { useMemo, useState } from 'react';
+
+import type { DropdownItem } from '../type';
+
+export default () => {
+  const [fullWidth, setFullWidth] = useState(false);
+
+  const items = useMemo<DropdownItem[]>(
+    () => [
+      { icon: <StarIcon />, key: 'favorite', label: '收藏' },
+      { icon: <SparklesIcon />, key: 'smart-rename', label: '智能重命名' },
+      { icon: <PencilIcon />, key: 'rename', label: '重命名' },
+      { type: 'divider' },
+      { icon: <HashIcon />, key: 'copy-id', label: '复制会话 ID' },
+      { icon: <CopyIcon />, key: 'copy', label: '复制' },
+      { type: 'divider' },
+      {
+        checked: fullWidth,
+        icon: <Maximize2Icon />,
+        key: 'full-width',
+        label: '全宽显示',
+        onCheckedChange: setFullWidth,
+        type: 'switch',
+      },
+      { type: 'divider' },
+      { danger: true, icon: <TrashIcon />, key: 'delete', label: '删除' },
+    ],
+    [fullWidth],
+  );
+
+  return (
+    <DropdownMenu items={items}>
+      <ActionIcon icon={MoreHorizontalIcon} />
+    </DropdownMenu>
+  );
+};

src/DropdownMenu/index.md

@@ -57,6 +57,8 @@ When items have descriptions, use `iconAlign` to control icon vertical alignment
 
 <code src="./demos/switch.tsx" center></code>
 
+<code src="./demos/switch-mixed.tsx" center></code>
+
 ## Lazy Items
 
 <code src="./demos/lazy.tsx" center></code>

src/base-ui/ContextMenu/renderItems.tsx

@@ -99,14 +99,19 @@ const ContextMenuSwitchItemInternal = ({
       }}
     >
       {children}
-      <Switch
-        checked={checked}
-        disabled={disabled}
-        size="small"
-        style={{ marginInlineStart: 16 }}
-        onChange={handleCheckedChange}
-        onClick={(_, e) => e.stopPropagation()}
-      />
+      <span
+        style={{ display: 'inline-flex', marginInlineStart: 16 }}
+        onFocus={(e) => e.stopPropagation()}
+      >
+        <Switch
+          checked={checked}
+          disabled={disabled}
+          size="small"
+          tabIndex={-1}
+          onChange={handleCheckedChange}
+          onClick={(_, e) => e.stopPropagation()}
+        />
+      </span>
     </ContextMenu.Item>
   );
 };

src/base-ui/DropdownMenu/atoms.tsx

@@ -361,14 +361,19 @@ export const DropdownMenuSwitchItem = ({
       }}
     >
       {children}
-      <Switch
-        checked={checked}
-        disabled={disabled}
-        size="small"
-        style={{ marginInlineStart: 16 }}
-        onChange={handleCheckedChange}
-        onClick={(_, e) => e.stopPropagation()}
-      />
+      <span
+        style={{ display: 'inline-flex', marginInlineStart: 16 }}
+        onFocus={(e) => e.stopPropagation()}
+      >
+        <Switch
+          checked={checked}
+          disabled={disabled}
+          size="small"
+          tabIndex={-1}
+          onChange={handleCheckedChange}
+          onClick={(_, e) => e.stopPropagation()}
+        />
+      </span>
     </Menu.Item>
   );
 };

src/base-ui/DropdownMenu/index.md

@@ -62,6 +62,8 @@ When items have descriptions, use `iconAlign` to control icon vertical alignment
 
 <code src="../../DropdownMenu/demos/switch.tsx" center></code>
 
+<code src="../../DropdownMenu/demos/switch-mixed.tsx" center></code>
+
 ## Lazy Items
 
 <code src="../../DropdownMenu/demos/lazy.tsx" center></code>