fix(guild): clear guild header menu highlight on pointer leave (#3125)

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<HTMLElement>) => {
+	const item = event.currentTarget;
+	if (document.activeElement !== item) return;
+	item.closest<HTMLElement>('[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)) {