diff --git a/umap/static/umap/js/modules/tableeditor.js b/umap/static/umap/js/modules/tableeditor.js
index 4fa02ed4..622dee21 100644
--- a/umap/static/umap/js/modules/tableeditor.js
+++ b/umap/static/umap/js/modules/tableeditor.js
@@ -226,16 +226,61 @@ export default class TableEditor extends WithTemplate {
input.focus()
input.addEventListener('blur', () => {
cell.innerHTML = feature.properties[property] || ''
+ cell.focus()
})
}
onKeyDown(event) {
+ // Only on data
, not inputs or anything else
+ if (!event.target.dataset.property) return
const key = event.key
- if (key === 'Enter') {
- const current = this.getFocus()
- if (current) {
- this.editCell(current)
- }
+ const actions = {
+ Enter: () => this.editCurrent(),
+ ArrowRight: () => this.moveRight(),
+ ArrowLeft: () => this.moveLeft(),
+ ArrowUp: () => this.moveUp(),
+ ArrowDown: () => this.moveDown(),
+ }
+ if (key in actions) {
+ actions[key]()
+ event.preventDefault()
+ }
+ }
+
+ editCurrent() {
+ const current = this.getFocus()
+ if (current) {
+ this.editCell(current)
+ }
+ }
+
+ moveRight() {
+ const cell = this.getFocus()
+ if (cell.nextSibling) cell.nextSibling.focus()
+ }
+
+ moveLeft() {
+ const cell = this.getFocus()
+ if (cell.previousSibling) cell.previousSibling.focus()
+ }
+
+ moveDown() {
+ const cell = this.getFocus()
+ const tr = cell.closest('tr')
+ const property = cell.dataset.property
+ const nextTr = tr.nextSibling
+ if (nextTr) {
+ nextTr.querySelector(`td[data-property="${property}"`).focus()
+ }
+ }
+
+ moveUp() {
+ const cell = this.getFocus()
+ const tr = cell.closest('tr')
+ const property = cell.dataset.property
+ const previousTr = tr.previousSibling
+ if (previousTr) {
+ previousTr.querySelector(`td[data-property="${property}"`).focus()
}
}
|