Merge f3e6c1cd12 into 20f2e34687

src/renderer/src/BottomBar.tsx

@@ -23,6 +23,7 @@ import getSwal from './swal';
 import { getSegColor as getSegColorRaw } from './util/colors';
 import { useSegColors } from './contexts';
 import { isExactDurationMatch } from './util/duration';
+import handleCutTimeInputKeyDown from './util/inputFocus';
 import useUserSettings from './hooks/useUserSettings';
 import useActionTitle from './hooks/useActionTitle';
 import { askForPlaybackRate, checkAppPath } from './dialogs';
@@ -251,6 +252,7 @@ const CutTimeInput = memo(({ disabled, darkMode, cutTime, setCutTime, startTimeO
         onChange={(e) => handleCutTimeInput(e.target.value)}
         onPaste={handleCutTimePaste}
         onBlur={handleInputBlur}
+        onKeyDown={(e) => handleCutTimeInputKeyDown(e, isStart)}
         onContextMenu={handleContextMenu}
         value={renderValue()}
       />

src/renderer/src/util/inputFocus.test.ts

@@ -0,0 +1,37 @@
+import { expect, it, vi } from 'vitest';
+
+import handleCutTimeInputKeyDown from './inputFocus';
+
+
+function createKeyEvent({ code, shiftKey = false }: { code: string, shiftKey?: boolean }) {
+  return {
+    code,
+    shiftKey,
+    preventDefault: vi.fn(),
+    currentTarget: { blur: vi.fn() },
+  };
+}
+
+it('should release focus when tabbing forward from the end time input', () => {
+  const event = createKeyEvent({ code: 'Tab' });
+
+  handleCutTimeInputKeyDown(event, false);
+
+  expect(event.preventDefault).toHaveBeenCalledOnce();
+  expect(event.currentTarget.blur).toHaveBeenCalledOnce();
+});
+
+it.each([
+  { name: 'the start time input', code: 'Tab', shiftKey: false, isStart: true },
+  { name: 'backwards tabbing', code: 'Tab', shiftKey: true, isStart: false },
+  { name: 'enter', code: 'Enter', shiftKey: false, isStart: false },
+  { name: 'escape', code: 'Escape', shiftKey: false, isStart: false },
+  { name: 'text editing', code: 'Digit1', shiftKey: false, isStart: false },
+])('should preserve focus for $name', ({ code, shiftKey, isStart }) => {
+  const event = createKeyEvent({ code, shiftKey });
+
+  handleCutTimeInputKeyDown(event, isStart);
+
+  expect(event.preventDefault).not.toHaveBeenCalled();
+  expect(event.currentTarget.blur).not.toHaveBeenCalled();
+});

src/renderer/src/util/inputFocus.ts

@@ -0,0 +1,13 @@
+import type { KeyboardEvent } from 'react';
+
+
+type CutTimeInputKeyEvent = Pick<KeyboardEvent<HTMLInputElement>, 'code' | 'shiftKey' | 'preventDefault'> & {
+  currentTarget: Pick<HTMLInputElement, 'blur'>,
+};
+
+export default function handleCutTimeInputKeyDown(e: CutTimeInputKeyEvent, isStart: boolean | undefined) {
+  if (isStart || e.code !== 'Tab' || e.shiftKey) return;
+
+  e.preventDefault();
+  e.currentTarget.blur();
+}