Improve keyboard shortcuts for adding rows

This commit is contained in:
Andrew Kingston 2023-04-22 16:40:00 +01:00
parent 61f05492ad
commit e54ea6661f
8 changed files with 22 additions and 10 deletions

View File

@ -72,6 +72,7 @@
api = { api = {
focus: () => open(), focus: () => open(),
blur: () => close(), blur: () => close(),
isActive: () => isOpen,
onKeyDown, onKeyDown,
} }
}) })

View File

@ -50,6 +50,7 @@
const cellAPI = { const cellAPI = {
focus: () => api?.focus(), focus: () => api?.focus(),
blur: () => api?.blur(), blur: () => api?.blur(),
isActive: () => api?.isActive?.() ?? false,
onKeyDown: (...params) => api?.onKeyDown(...params), onKeyDown: (...params) => api?.onKeyDown(...params),
isReadonly: () => readonly, isReadonly: () => readonly,
getType: () => column.schema.type, getType: () => column.schema.type,

View File

@ -43,6 +43,7 @@
api = { api = {
focus: () => open(), focus: () => open(),
blur: () => close(), blur: () => close(),
isActive: () => isOpen,
onKeyDown, onKeyDown,
} }
}) })

View File

@ -73,6 +73,7 @@
api = { api = {
focus: open, focus: open,
blur: close, blur: close,
isActive: () => isOpen,
onKeyDown, onKeyDown,
} }
}) })

View File

@ -235,6 +235,7 @@
api = { api = {
focus: open, focus: open,
blur: close, blur: close,
isActive: () => isOpen,
onKeyDown, onKeyDown,
} }
}) })

View File

@ -33,6 +33,7 @@
api = { api = {
focus: () => input?.focus(), focus: () => input?.focus(),
blur: () => input?.blur(), blur: () => input?.blur(),
isActive: () => active,
onKeyDown, onKeyDown,
} }
}) })

View File

@ -31,6 +31,10 @@
$: $tableId, (isAdding = false) $: $tableId, (isAdding = false)
const addRow = async () => { const addRow = async () => {
// Blur the active cell and tick to let final value updates propagate
$focusedCellAPI?.blur()
await tick()
// Create row // Create row
const savedRow = await rows.actions.addRow(newRow, 0) const savedRow = await rows.actions.addRow(newRow, 0)
if (savedRow) { if (savedRow) {
@ -65,12 +69,6 @@
$hoveredRowId = rowId $hoveredRowId = rowId
if (firstColumn) { if (firstColumn) {
$focusedCellId = `${rowId}-${firstColumn.name}` $focusedCellId = `${rowId}-${firstColumn.name}`
// Also focus the cell if it is a text-like cell
if (["string", "number"].includes(firstColumn.schema.type)) {
await tick()
$focusedCellAPI?.focus()
}
} }
} }
@ -89,8 +87,11 @@
return return
} }
if (e.key === "Escape") { if (e.key === "Escape") {
e.preventDefault() // Only close the new row component if we aren't actively inside a cell
clear() if (!$focusedCellAPI?.isActive()) {
e.preventDefault()
clear()
}
} else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
e.preventDefault() e.preventDefault()
addRow() addRow()
@ -119,7 +120,9 @@
> >
<GridCell width={GutterWidth} rowFocused> <GridCell width={GutterWidth} rowFocused>
<div class="gutter"> <div class="gutter">
<div class="number">1</div> <div class="number">
<Icon name="Add" />
</div>
{#if $config.allowExpandRows} {#if $config.allowExpandRows}
<Icon name="Maximize" size="S" hoverable on:click={addViaModal} /> <Icon name="Maximize" size="S" hoverable on:click={addViaModal} />
{/if} {/if}

View File

@ -30,7 +30,10 @@
// Always intercept certain key presses // Always intercept certain key presses
const api = $focusedCellAPI const api = $focusedCellAPI
if (e.key === "Escape") { if (e.key === "Escape") {
api?.blur?.() // By setting a tiny timeout here we can ensure that other listeners
// which depend on being able to read cell state on an escape keypress
// get a chance to observe the true state before we blur
setTimeout(api?.blur, 10)
} else if (e.key === "Tab") { } else if (e.key === "Tab") {
api?.blur?.() api?.blur?.()
changeFocusedColumn(1) changeFocusedColumn(1)