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

View File

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

View File

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

View File

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

View File

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