diff --git a/apps/desktop/layer/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx b/apps/desktop/layer/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx index 5eeb42619..7166c218f 100644 --- a/apps/desktop/layer/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx +++ b/apps/desktop/layer/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx @@ -1,3 +1,4 @@ +import { useSetGlobalFocusableScope } from "@follow/components/common/Focusable/hooks.js" import { Divider } from "@follow/components/ui/divider/Divider.js" import { Kbd } from "@follow/components/ui/kbd/Kbd.js" import { RootPortal } from "@follow/components/ui/portal/index.js" @@ -6,15 +7,21 @@ import { cn } from "@follow/utils/utils" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" import * as React from "react" -import { Focusable } from "~/components/common/Focusable" import { HotkeyScope } from "~/constants" const DropdownMenu: typeof DropdownMenuPrimitive.Root = (props) => { + const setGlobalFocusableScope = useSetGlobalFocusableScope() return ( { + if (open) { + setGlobalFocusableScope(HotkeyScope.DropdownMenu, "append") + } else { + setGlobalFocusableScope(HotkeyScope.DropdownMenu, "remove") + } + props.onOpenChange?.(open) }, [props.onOpenChange], @@ -91,18 +98,16 @@ const DropdownMenuContent = ({ }) => { return ( - - - + ) } diff --git a/apps/desktop/layer/renderer/src/modules/subscription-column/index.tsx b/apps/desktop/layer/renderer/src/modules/subscription-column/index.tsx index 2ae22046f..166ab1114 100644 --- a/apps/desktop/layer/renderer/src/modules/subscription-column/index.tsx +++ b/apps/desktop/layer/renderer/src/modules/subscription-column/index.tsx @@ -1,4 +1,4 @@ -import { useGlobalFocusableScope } from "@follow/components/common/Focusable/hooks.js" +import { useGlobalFocusableScopeSelector } from "@follow/components/common/Focusable/hooks.js" import { ActionButton } from "@follow/components/ui/button/index.js" import { RootPortal } from "@follow/components/ui/portal/index.js" import { Routes } from "@follow/constants" @@ -243,9 +243,15 @@ const CommandsHandler = ({ setActive: (args: string | ((prev: string | undefined, index: number) => string)) => void timelineList: string[] }) => { - const activeScope = useGlobalFocusableScope() - const when = - activeScope.or(HotkeyScope.SubscriptionList, HotkeyScope.Timeline) || activeScope.size === 0 + const when = useGlobalFocusableScopeSelector( + // eslint-disable-next-line @eslint-react/hooks-extra/no-unnecessary-use-callback + useCallback( + (activeScope) => + activeScope.or(HotkeyScope.SubscriptionList, HotkeyScope.Timeline) || + activeScope.size === 0, + [], + ), + ) useCommandBinding({ commandId: COMMAND_ID.subscription.switchTabToNext, @@ -261,13 +267,13 @@ const CommandsHandler = ({ return EventBus.subscribe(COMMAND_ID.subscription.switchTabToNext, () => { setActive((_, i) => timelineList[(i + 1) % timelineList.length]!) }) - }, [activeScope, setActive, timelineList]) + }, [setActive, timelineList]) useEffect(() => { return EventBus.subscribe(COMMAND_ID.subscription.switchTabToPrevious, () => { setActive((_, i) => timelineList[(i - 1 + timelineList.length) % timelineList.length]!) }) - }, [activeScope, setActive, timelineList]) + }, [setActive, timelineList]) return null }