diff --git a/fluxer_app/src/features/guild/components/popouts/GuildHeaderPopout.tsx b/fluxer_app/src/features/guild/components/popouts/GuildHeaderPopout.tsx index 346930b6a..f170c4d51 100644 --- a/fluxer_app/src/features/guild/components/popouts/GuildHeaderPopout.tsx +++ b/fluxer_app/src/features/guild/components/popouts/GuildHeaderPopout.tsx @@ -63,6 +63,11 @@ const EDIT_COMMUNITY_PROFILE_DESCRIPTOR = msg({ message: 'Edit community profile', comment: 'Button or menu action label in the guild header popout. Keep it concise.', }); +const releaseHoverFocus = (event: React.MouseEvent) => { + const item = event.currentTarget; + if (document.activeElement !== item) return; + item.closest('[role="menu"]')?.focus(); +}; export const GuildHeaderPopoutItem = observer( (props: {title: string; icon: Icon; onClick?: () => void; danger?: boolean}) => { const handleSelect = useCallback(() => { @@ -80,6 +85,7 @@ export const GuildHeaderPopoutItem = observer( className={clsx(styles.itemButton, props.danger && styles.itemDanger)} onClick={handleSelect} onMouseEnter={handleMouseEnter} + onMouseLeave={releaseHoverFocus} data-roving-focus="true" data-flx="guild.guild-header-popout.guild-header-popout-item.item-button.select" > @@ -113,6 +119,7 @@ export const GuildHeaderPopoutCheckboxItem = observer( onMouseEnter={(event) => { event.currentTarget.focus(); }} + onMouseLeave={releaseHoverFocus} onClick={handleClick} onKeyDown={(e) => { if (isKeyboardActivationKey(e.key)) {