diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte index 39a67d44eb..3d5bf01bf9 100644 --- a/packages/frontend-core/src/components/grid/layout/Grid.svelte +++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte @@ -80,6 +80,7 @@ loading, rowHeight, contentLines, + gridFocused, } = context // Keep stores up to date @@ -116,6 +117,8 @@ class:is-reordering={$isReordering} class:stripe={$config.stripeRows} style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};" + on:mouseenter={() => gridFocused.set(true)} + on:mouseleave={() => gridFocused.set(false)} > {#if showControls}
diff --git a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte index a210e125ff..c4b7c598cd 100644 --- a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte +++ b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte @@ -15,6 +15,7 @@ selectedRows, config, menu, + gridFocused, } = getContext("grid") const ignoredOriginSelectors = [ @@ -24,6 +25,11 @@ // Global key listener which intercepts all key events const handleKeyDown = e => { + // Ignore completely if the grid is not focused + if (!$gridFocused) { + return + } + // Avoid processing events sourced from certain origins if (e.target?.closest) { for (let selector of ignoredOriginSelectors) { diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js index b62e883437..eeea8fff43 100644 --- a/packages/frontend-core/src/components/grid/stores/ui.js +++ b/packages/frontend-core/src/components/grid/stores/ui.js @@ -15,6 +15,7 @@ export const createStores = () => { const hoveredRowId = writable(null) const rowHeight = writable(DefaultRowHeight) const previousFocusedRowId = writable(null) + const gridFocused = writable(false) // Derive the current focused row ID const focusedRowId = derived( @@ -46,6 +47,7 @@ export const createStores = () => { previousFocusedRowId, hoveredRowId, rowHeight, + gridFocused, selectedRows: { ...selectedRows, actions: {