Disable grid keyboard handling while certain popovers are open

This commit is contained in:
Andrew Kingston 2024-05-23 13:17:09 +01:00
parent 8967261d82
commit 8d837038cf
5 changed files with 10 additions and 3 deletions

View File

@ -29,6 +29,7 @@
focusedCellId,
filter,
inlineFilters,
keyboardBlocked,
} = getContext("grid")
const searchableTypes = [
@ -58,6 +59,7 @@
$: debouncedUpdateFilter(searchValue)
$: orderable = !column.primaryDisplay
$: editable = $config.canEditColumns && !column.schema.disabled
$: keyboardBlocked.set(open)
const close = () => {
open = false

View File

@ -3,7 +3,8 @@
import { Icon } from "@budibase/bbui"
import GridPopover from "../overlays/GridPopover.svelte"
const { visibleColumns, scroll, width, subscribe, ui } = getContext("grid")
const { visibleColumns, scroll, width, subscribe, ui, keyboardBlocked } =
getContext("grid")
let anchor
let isOpen = false
@ -14,6 +15,7 @@
)
$: end = columnsWidth - 1 - $scroll.left
$: left = Math.min($width - 40, end)
$: keyboardBlocked.set(isOpen)
const open = () => {
ui.actions.blur()

View File

@ -66,7 +66,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="content" on:mouseleave={() => ($hoveredRowId = null)}>
<div class="content">
<GridScrollWrapper scrollVertically attachHandlers>
{#each $renderedRows as row, idx}
{@const rowSelected = !!$selectedRows[row._id]}

View File

@ -17,6 +17,7 @@
config,
menu,
gridFocused,
keyboardBlocked,
} = getContext("grid")
const ignoredOriginSelectors = [
@ -29,7 +30,7 @@
// Global key listener which intercepts all key events
const handleKeyDown = e => {
// Ignore completely if the grid is not focused
if (!$gridFocused) {
if (!$gridFocused || $keyboardBlocked) {
return
}

View File

@ -19,6 +19,7 @@ export const createStores = context => {
const previousFocusedRowId = writable(null)
const previousFocusedCellId = writable(null)
const gridFocused = writable(false)
const keyboardBlocked = writable(false)
const isDragging = writable(false)
const buttonColumnWidth = writable(0)
@ -54,6 +55,7 @@ export const createStores = context => {
hoveredRowId,
rowHeight,
gridFocused,
keyboardBlocked,
isDragging,
buttonColumnWidth,
selectedRows: {