From 8edec1eb7c876751d20118aeea0c66dd5848b69e Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Tue, 16 Apr 2024 15:08:19 +0530 Subject: [PATCH 1/4] Update table cell --- .../modus-table-cell-main.tsx | 34 ++++++++++++++----- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index 0248f76db..0632afca1 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx @@ -19,7 +19,6 @@ import { COLUMN_DEF_CELL_EDITOR_ARGS_KEY, COLUMN_DEF_DATATYPE_LINK, KEYBOARD_ENTER, - KEYBOARD_ESCAPE, COLUMN_DEF_DATATYPE_BADGE, } from '../../../modus-table.constants'; import NavigateTableCells from '../../../utilities/table-cell-navigation.utility'; @@ -102,12 +101,28 @@ export class ModusTableCellMain { }; handleCellKeydown = (event: KeyboardEvent) => { - if (event.defaultPrevented) return; - const key = event.key?.toLowerCase(); const isCellEditable = this.cell.column.columnDef[this.cellEditableKey]; - if (isCellEditable && !this.editMode && key === KEYBOARD_ENTER) { + if (event.defaultPrevented) return; + + if (key === KEYBOARD_ENTER && isCellEditable) { + this.editMode = !this.editMode; + + event.preventDefault(); + } + + if (key === 'tab' && isCellEditable) { + this.editMode = !this.editMode; + const nextCell = this.cellEl.nextElementSibling?.querySelector('modus-table-cell-main') as any; + if (nextCell) { + nextCell.editMode = true; + nextCell.focus(); + } + event.preventDefault(); + } + + if (isCellEditable && !this.editMode) { this.editMode = true; event.stopPropagation(); } else { @@ -133,15 +148,18 @@ export class ModusTableCellMain { handleCellEditorKeyDown = (event: KeyboardEvent, newValue: string, oldValue: string) => { const key = event.key?.toLowerCase(); - if (key === KEYBOARD_ENTER) { + if (key === 'tab') { + this.handleCellEditorValueChange(newValue, oldValue); + NavigateTableCells({ + eventKey: 'tab', + cellElement: this.cellEl, + }); + } else if (key === KEYBOARD_ENTER) { this.handleCellEditorValueChange(newValue, oldValue); NavigateTableCells({ eventKey: KEYBOARD_ENTER, cellElement: this.cellEl, }); - } else if (key === KEYBOARD_ESCAPE) { - this.editMode = false; - this.cellEl.focus(); } else return; event.stopPropagation(); From aa9cae0380c0863ad0586f87c076845b8fa68236 Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Thu, 2 May 2024 11:23:17 +0530 Subject: [PATCH 2/4] Update any to unkown --- .../cell/modus-table-cell-main/modus-table-cell-main.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index 0632afca1..475dd39ac 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx @@ -114,10 +114,12 @@ export class ModusTableCellMain { if (key === 'tab' && isCellEditable) { this.editMode = !this.editMode; - const nextCell = this.cellEl.nextElementSibling?.querySelector('modus-table-cell-main') as any; + const nextCell = this.cellEl.nextElementSibling?.querySelector( + 'modus-table-cell-main' + ) as unknown as ModusTableCellMain; if (nextCell) { nextCell.editMode = true; - nextCell.focus(); + (nextCell as unknown as HTMLElement).focus(); } event.preventDefault(); } From 7f02b3ac29f4924274210e5b31cef4e0d5807f06 Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Tue, 16 Apr 2024 15:08:19 +0530 Subject: [PATCH 3/4] Update table cell --- .../modus-table-cell-main.tsx | 34 ++++++++++++++----- 1 file changed, 26 insertions(+), 8 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index 722d54ade..92d1a08c7 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx @@ -20,7 +20,6 @@ import { COLUMN_DEF_CELL_EDITOR_ARGS_KEY, COLUMN_DEF_DATATYPE_LINK, KEYBOARD_ENTER, - KEYBOARD_ESCAPE, COLUMN_DEF_DATATYPE_BADGE, } from '../../../modus-table.constants'; import NavigateTableCells from '../../../utilities/table-cell-navigation.utility'; @@ -128,12 +127,28 @@ export class ModusTableCellMain { }; handleCellKeydown = (event: KeyboardEvent) => { - if (event.defaultPrevented) return; - const key = event.key?.toLowerCase(); const isCellEditable = this.cell.column.columnDef[this.cellEditableKey]; - if (isCellEditable && !this.editMode && key === KEYBOARD_ENTER) { + if (event.defaultPrevented) return; + + if (key === KEYBOARD_ENTER && isCellEditable) { + this.editMode = !this.editMode; + + event.preventDefault(); + } + + if (key === 'tab' && isCellEditable) { + this.editMode = !this.editMode; + const nextCell = this.cellEl.nextElementSibling?.querySelector('modus-table-cell-main') as any; + if (nextCell) { + nextCell.editMode = true; + nextCell.focus(); + } + event.preventDefault(); + } + + if (isCellEditable && !this.editMode) { this.editMode = true; event.stopPropagation(); } else { @@ -159,15 +174,18 @@ export class ModusTableCellMain { handleCellEditorKeyDown = (event: KeyboardEvent, newValue: string, oldValue: string) => { const key = event.key?.toLowerCase(); - if (key === KEYBOARD_ENTER) { + if (key === 'tab') { + this.handleCellEditorValueChange(newValue, oldValue); + NavigateTableCells({ + eventKey: 'tab', + cellElement: this.cellEl, + }); + } else if (key === KEYBOARD_ENTER) { this.handleCellEditorValueChange(newValue, oldValue); NavigateTableCells({ eventKey: KEYBOARD_ENTER, cellElement: this.cellEl, }); - } else if (key === KEYBOARD_ESCAPE) { - this.editMode = false; - this.cellEl.focus(); } else return; event.stopPropagation(); From 28a882c82ed828568828174fb2ed87a84fc9a50f Mon Sep 17 00:00:00 2001 From: Elisha Sam Peter Prabhu Date: Thu, 2 May 2024 11:23:17 +0530 Subject: [PATCH 4/4] Update any to unkown --- .../cell/modus-table-cell-main/modus-table-cell-main.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx index 92d1a08c7..f774a3b17 100644 --- a/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx +++ b/stencil-workspace/src/components/modus-table/parts/cell/modus-table-cell-main/modus-table-cell-main.tsx @@ -140,10 +140,12 @@ export class ModusTableCellMain { if (key === 'tab' && isCellEditable) { this.editMode = !this.editMode; - const nextCell = this.cellEl.nextElementSibling?.querySelector('modus-table-cell-main') as any; + const nextCell = this.cellEl.nextElementSibling?.querySelector( + 'modus-table-cell-main' + ) as unknown as ModusTableCellMain; if (nextCell) { nextCell.editMode = true; - nextCell.focus(); + (nextCell as unknown as HTMLElement).focus(); } event.preventDefault(); }