fix: table re-renders no longer lose cell focus

This commit is contained in:
Carlos Valente
2026-02-08 17:14:14 +01:00
committed by Carlos Valente
parent f9563fca5f
commit b6a01a52e2
6 changed files with 264 additions and 116 deletions
+53 -6
View File
@@ -1,10 +1,57 @@
import { expect, test } from '@playwright/test';
test('cuesheet displays events', async ({ page }) => {
// same elements in cuesheet
await page.goto('http://localhost:4001/cuesheet');
await expect(page.getByRole('row', { name: 'Lunch break' })).toBeVisible();
await expect(page.getByRole('row', { name: 'Afternoon break' })).toBeVisible();
await expect(page.locator('#cuesheet')).toBeVisible();
await page.goto('/cuesheet');
await expect(page.getByTestId('cuesheet')).toBeVisible();
await expect(page.getByTestId('cuesheet-event').first()).toBeVisible();
});
test('cuesheet datagrid keeps keyboard focus flow while editing text cells', async ({ page }) => {
await page.goto('/cuesheet');
const firstEvent = page.getByTestId('cuesheet-event').first();
await expect(firstEvent).toBeVisible();
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
*/
await titleEditor.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);
/**
* 2. navigate and modify multiline text cell
* submitting works with ctrl/cmd + enter and the focus returns to the parent
*/
await page.keyboard.press('ArrowRight');
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);
/**
* 2. navigate and modify single line text cell again
* pressing escape cancels the edit and the focus returns to the parent
*/
await page.keyboard.press('ArrowLeft');
await page.keyboard.press('Enter');
await expect(titleEditor).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);
});