From c3108b40ce91764a43db1ac4c29ea2cd4f70a50a Mon Sep 17 00:00:00 2001 From: Mattias Granlund Date: Wed, 24 Sep 2025 16:21:56 +0200 Subject: [PATCH] Use focus manager for navigation context menus Removes custom keyboard navigation for context menus, and replaces it with the new focus manager functionality. Note that ContextMenuItem contains two focusables, one for navigation and one to support f-keys. --- .../ui/src/lib/components/ContextMenu.svelte | 26 ++++++------ .../src/lib/components/ContextMenuItem.svelte | 5 ++- .../components/ContextMenuItemSubmenu.svelte | 40 +------------------ .../ui/src/lib/components/KebabButton.svelte | 13 ++++++ packages/ui/src/lib/focus/focusManager.ts | 37 +++++++++-------- packages/ui/src/lib/focus/focusTypes.ts | 6 +-- 6 files changed, 52 insertions(+), 75 deletions(-) diff --git a/packages/ui/src/lib/components/ContextMenu.svelte b/packages/ui/src/lib/components/ContextMenu.svelte index aa70d7cba6..a5c8525834 100644 --- a/packages/ui/src/lib/components/ContextMenu.svelte +++ b/packages/ui/src/lib/components/ContextMenu.svelte @@ -329,13 +329,6 @@ return isVisible; } - function handleKeyNavigation(e: KeyboardEvent) { - if (e.key === 'Escape') { - e.preventDefault(); - close(); - } - } - $effect(() => { if (!menuContainer) return; const config = { attributes: false, childList: true, subtree: true }; @@ -358,17 +351,26 @@ {#if isVisible} -
- + +
{ + close(); + return true; + } + }} + use:portal={'body'} + >
import Icon from '$components/Icon.svelte'; import Tooltip from '$components/Tooltip.svelte'; + import { focusable } from '$lib/focus/focusable'; import { keysStringToArr } from '$lib/utils/hotkeys'; import { getContext } from 'svelte'; import type iconsJson from '@gitbutler/ui/data/icons.json'; @@ -62,12 +63,13 @@