Disable grid keyboard handling while certain popovers are open
This commit is contained in:
parent
8967261d82
commit
8d837038cf
|
@ -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
|
||||||
|
|
|
@ -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()
|
||||||
|
|
|
@ -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]}
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
Loading…
Reference in New Issue