fix: table re-renders no longer lose cell focus

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx

@@ -91,6 +91,7 @@ export default function EventRow({
       }}
       data-cursor={hasCursor}
       data-testid='cuesheet-event'
+      data-entry-id={id}
       {...virtuosoProps}
     >
       {cuesheetMode === AppMode.Edit && (
@@ -127,6 +128,8 @@ export default function EventRow({
               }}
               tabIndex={-1}
               role='cell'
+              data-testid={`cuesheet-cell-${cell.column.id}`}
+              data-column-id={cell.column.id}
             >
               {flexRender(cell.column.columnDef.cell, cell.getContext())}
             </td>

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MultiLineCell.tsx

@@ -5,12 +5,14 @@ import useReactiveTextInput from '../../../../common/components/input/text-input
 
 interface MultiLineCellProps {
   initialValue: string;
+  fieldId?: string;
+  fieldLabel?: string;
   handleUpdate: (newValue: string) => void;
 }
 
 export default memo(MultiLineCell);
 
-function MultiLineCell({ initialValue, handleUpdate }: MultiLineCellProps) {
+function MultiLineCell({ initialValue, fieldId, fieldLabel, handleUpdate }: MultiLineCellProps) {
   const ref = useRef<HTMLTextAreaElement | null>(null);
   const submitCallback = useCallback((newValue: string) => handleUpdate(newValue), [handleUpdate]);
 
@@ -30,6 +32,8 @@ function MultiLineCell({ initialValue, handleUpdate }: MultiLineCellProps) {
       onBlur={onBlur}
       onKeyDown={onKeyDown}
       spellCheck={false}
+      data-testid={fieldId ? `cuesheet-editor-${fieldId}` : undefined}
+      aria-label={fieldLabel ? `${fieldLabel} editor` : undefined}
     />
   );
 }

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/SingleLineCell.tsx

@@ -5,13 +5,18 @@ import useReactiveTextInput from '../../../../common/components/input/text-input
 
 interface SingleLineCellProps {
   initialValue: string;
+  fieldId?: string;
+  fieldLabel?: string;
   allowSubmitSameValue?: boolean;
   handleUpdate: (newValue: string) => void;
   handleCancelUpdate?: () => void;
 }
 
 const SingleLineCell = forwardRef(
-  ({ initialValue, allowSubmitSameValue, handleUpdate, handleCancelUpdate }: SingleLineCellProps, inputRef) => {
+  (
+    { initialValue, fieldId, fieldLabel, allowSubmitSameValue, handleUpdate, handleCancelUpdate }: SingleLineCellProps,
+    inputRef,
+  ) => {
     const ref = useRef<HTMLInputElement | null>(null);
     const submitCallback = useCallback((newValue: string) => handleUpdate(newValue), [handleUpdate]);
 
@@ -47,6 +52,8 @@ const SingleLineCell = forwardRef(
         onChange={onChange}
         onBlur={onBlur}
         onKeyDown={onKeyDown}
+        data-testid={fieldId ? `cuesheet-editor-${fieldId}` : undefined}
+        aria-label={fieldLabel ? `${fieldLabel} editor` : undefined}
       />
     );
   },

apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory.tsx

@@ -17,6 +17,10 @@ import MutedText from './MutedText';
 import SingleLineCell from './SingleLineCell';
 import TimeInput from './TimeInput';
 
+function getColumnLabel(column: CellContext<ExtendedEntry, unknown>['column']): string {
+  return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
+}
+
 function MakeStart({ getValue, row, table, column }: CellContext<ExtendedEntry, unknown>) {
   if (!table.options.meta) {
     return null;
@@ -146,7 +150,14 @@ function MakeMultiLineField({ row, column, table }: CellContext<ExtendedEntry, u
     return <GhostedText multiline>{initialValue}</GhostedText>;
   }
 
-  return <MultiLineCell initialValue={initialValue as string} handleUpdate={update} />;
+  return (
+    <MultiLineCell
+      initialValue={initialValue as string}
+      fieldId={column.id}
+      fieldLabel={getColumnLabel(column)}
+      handleUpdate={update}
+    />
+  );
 }
 
 function LazyImage({ row, column, table }: CellContext<ExtendedEntry, unknown>) {
@@ -186,7 +197,14 @@ function MakeSingleLineField({ row, column, table }: CellContext<ExtendedEntry,
     return <GhostedText>{initialValue}</GhostedText>;
   }
 
-  return <SingleLineCell initialValue={initialValue as string} handleUpdate={update} />;
+  return (
+    <SingleLineCell
+      initialValue={initialValue as string}
+      fieldId={column.id}
+      fieldLabel={getColumnLabel(column)}
+      handleUpdate={update}
+    />
+  );
 }
 
 function MakeFlagField({ row }: CellContext<ExtendedEntry, unknown>) {
@@ -219,7 +237,14 @@ function MakeCustomField({ row, column, table }: CellContext<ExtendedEntry, unkn
     return <GhostedText multiline>{initialValue}</GhostedText>;
   }
 
-  return <MultiLineCell initialValue={initialValue} handleUpdate={update} />;
+  return (
+    <MultiLineCell
+      initialValue={initialValue}
+      fieldId={column.id}
+      fieldLabel={getColumnLabel(column)}
+      handleUpdate={update}
+    />
+  );
 }
 
 /**