-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
XIVY-15861 Improve keyboard navigation in editable tables
- Add tab-navigation through editable tables - Add keydown/-up navigation through editable tables - Change useEffect to useMemo in PropertyTable - Fix Escape-Key behavior in Monaco
- Loading branch information
Showing
18 changed files
with
376 additions
and
109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
packages/inscription-view/src/components/parts/common/table/cellFocus-utils.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| export const focusNewCell = (domTable: HTMLTableElement | undefined, rowIndex: number, cellType: 'input' | 'button') => { | ||
| setTimeout(() => { | ||
| if (!domTable) return; | ||
| const validRows = Array.from(domTable.rows).filter(row => !row.classList.contains('ui-message-row')); | ||
| validRows[rowIndex]?.cells[0]?.querySelector(cellType)?.focus(); | ||
| }, 0); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { describe, test, expect, beforeEach } from 'vitest'; | ||
| import { focusAdjacentTabIndexMonaco } from './focus'; | ||
|
|
||
| describe('focusAdjacentTabIndexMonaco', () => { | ||
| let input1: HTMLInputElement, input2: HTMLInputElement, button: HTMLButtonElement, div: HTMLDivElement; | ||
|
|
||
| beforeEach(() => { | ||
| document.body.innerHTML = ` | ||
| <input type="text" id="input1" /> | ||
| <button id="button">Click me</button> | ||
| <input type="text" id="input2" /> | ||
| <div tabindex="0" id="div1" /> | ||
| `; | ||
|
|
||
| input1 = document.getElementById('input1') as HTMLInputElement; | ||
| button = document.getElementById('button') as HTMLButtonElement; | ||
| input2 = document.getElementById('input2') as HTMLInputElement; | ||
| div = document.getElementById('div1') as HTMLDivElement; | ||
| }); | ||
|
|
||
| test('focus the next focusable element', () => { | ||
| input1.focus(); | ||
| focusAdjacentTabIndexMonaco('next'); | ||
| expect(document.activeElement).toBe(button); | ||
| }); | ||
|
|
||
| test('focus the previous focusable element', () => { | ||
| input2.focus(); | ||
| focusAdjacentTabIndexMonaco('previous'); | ||
| expect(document.activeElement).toBe(input1); | ||
| }); | ||
|
|
||
| test('do nothing if there is no active element', () => { | ||
| if (document.activeElement instanceof HTMLElement) { | ||
| document.activeElement.blur(); | ||
| } | ||
| focusAdjacentTabIndexMonaco('next'); | ||
| expect(document.activeElement).not.toBe(input1); | ||
| expect(document.activeElement).not.toBe(button); | ||
| }); | ||
|
|
||
| test('do nothing if there is no next or previous element', () => { | ||
| div.focus(); | ||
| focusAdjacentTabIndexMonaco('next'); | ||
| expect(document.activeElement).toBe(div); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| export const focusAdjacentTabIndexMonaco = (direction: 'next' | 'previous') => { | ||
| if (!(document.activeElement instanceof HTMLElement)) return; | ||
|
|
||
| const focusableElements = Array.from( | ||
| document.querySelectorAll<HTMLElement>('input, button, select, textarea, [tabindex]:not([tabindex="-1"])') | ||
| ); | ||
|
|
||
| const currentElement = document.activeElement; | ||
| const currentIndex = focusableElements.indexOf(currentElement); | ||
| if (currentIndex === -1) return; | ||
|
|
||
| //For previous, we need to go back 2 steps to ensure to jump out of monaco editor | ||
| const nextElement = direction === 'next' ? focusableElements[currentIndex + 1] : focusableElements[currentIndex - 2]; | ||
|
|
||
| if (nextElement) { | ||
| nextElement.focus(); | ||
| } | ||
| }; |