cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-08 17:03:53 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

fix(cuesheet): restore keyboard focus flow for lazy text cells

Browse Source 
The lazy editor (Exp A) unmounts on exit, so the editor's own deferred
focus-return (useReactiveTextInput) targeted a detached node and focus was
lost to <body>, breaking table keyboard navigation after submit/escape.

Return focus to the parent cell deterministically in a layout effect once the
display element is back in the DOM (rather than a setTimeout that races the
next keypress), mirroring the time/duration cells.

Update the e2e tests to the lazy interaction model (click the cell to open the
on-demand editor, assert it unmounts on exit) — matching the existing timer
cell test. Verified end-to-end: 202-cuesheet (3/3) and 206-url-preset (5/5).
This commit is contained in:
Claude
2026-06-19 06:23:51 +00:00
parent d17a7e9321
commit dcdfd9ca85
3 changed files with 49 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/tests/features/202-cuesheet.spec.ts
+23 -15
View File
@@ -57,46 +57,54 @@ test('cuesheet datagrid keeps keyboard focus flow while editing text cells', asy
const firstEvent = page.getByTestId('cuesheet-event').first();
await expect(firstEvent).toBeVisible();
const cueCell = firstEvent.getByTestId('cuesheet-cell-cue');
const titleCell = firstEvent.getByTestId('cuesheet-cell-title');
const noteCell = firstEvent.getByTestId('cuesheet-cell-note');
const cueEditor = firstEvent.getByTestId('cuesheet-editor-cue');
const titleEditor = firstEvent.getByTestId('cuesheet-editor-title');
const noteEditor = firstEvent.getByTestId('cuesheet-editor-note');
/**
* 1. focus a cell in the datagrid single line text
* submitting the data returns the focus to the parent
* 1. clicking a single line text cell opens the editor (mounted on demand)
* submitting with Enter closes the editor and returns focus to the parent cell
*/
await titleEditor.click();
await titleCell.click();
await expect(titleEditor).toBeFocused();
const updatedTitle = `focus-title-${Date.now()}`;
await titleEditor.fill(updatedTitle);
await titleEditor.press('Enter');
await expect(titleEditor).not.toBeFocused();
await expect(titleEditor).toHaveValue(updatedTitle);
await expect(titleEditor).toHaveCount(0);
await expect(titleCell).toContainText(updatedTitle);
await expect(titleCell).toBeFocused();
/**
* 2. navigate and modify multiline text cell
* 2. navigate to the multiline text cell with the keyboard and open it with Enter
* submitting works with ctrl/cmd + enter and the focus returns to the parent
*/
await page.keyboard.press('ArrowRight');
await expect(noteCell).toBeFocused();
await page.keyboard.press('Enter');
await expect(noteEditor).toBeFocused();
const updatedNote = `focus-note-${Date.now()}`;
await noteEditor.fill(updatedNote);
await noteEditor.press('ControlOrMeta+Enter');
await expect(noteEditor).not.toBeFocused();
await expect(noteEditor).toHaveValue(updatedNote);
await expect(noteEditor).toHaveCount(0);
await expect(noteCell).toContainText(updatedNote);
await expect(noteCell).toBeFocused();
/**
* 2. navigate and modify single line text cell again
* pressing escape cancels the edit and the focus returns to the parent
* 3. navigating back returns focus to the title cell
* opening the cue cell and pressing escape cancels the edit and reverts the value
*/
await page.keyboard.press('ArrowLeft');
await page.keyboard.press('Enter');
await expect(titleEditor).toBeFocused();
await expect(titleCell).toBeFocused();
await cueCell.click();
await expect(cueEditor).toBeFocused();
const cueBeforeCancel = await cueEditor.inputValue();
await cueEditor.click();
await cueEditor.fill(`${cueBeforeCancel} temporary`);
await cueEditor.press('Escape');
await expect(cueEditor).not.toBeFocused();
await expect(cueEditor).toHaveValue(cueBeforeCancel);
await expect(cueEditor).toHaveCount(0);
await expect(cueCell).toContainText(cueBeforeCancel);
await expect(cueCell).toBeFocused();
});
e2e/tests/features/206-url-preset.spec.ts
+4 -3
View File
@@ -231,9 +231,10 @@ test.describe('Sharing from cuesheet', () => {
// Verify that the title is visible and editable
await expect(page.getByTestId('cuesheet-event').getByRole('cell', { name: 'title' })).toBeVisible();
const titleEditor = page.getByTestId('cuesheet-event').getByTestId('cuesheet-editor-title');
await titleEditor.click();
await expect(titleEditor).toBeEditable();
// the editor mounts on demand: clicking the cell opens it
const firstEvent = page.getByTestId('cuesheet-event').first();
await firstEvent.getByTestId('cuesheet-cell-title').click();
await expect(firstEvent.getByTestId('cuesheet-editor-title')).toBeEditable();
// other elements are not there
await expect(page.getByRole('cell', { name: 'Duration' })).toBeHidden();