fix(cuesheet): prevent timer cells from submitting on tab-out or escape (#2083)

This commit is contained in:
Carlos Valente
2026-06-07 12:59:18 +02:00
committed by GitHub
parent 5a3ea9f7d0
commit 199dea5df6
5 changed files with 98 additions and 7 deletions
@@ -49,6 +49,10 @@ function DurationInput({
setIsEditing(false);
setTimeout(() => textRef.current?.focusParentElement()); // Immediate timeout to ensure state change takes place first
};
const handleTabOut = useCallback(() => {
setIsEditing(false);
// Tab moves focus naturally; do not steal it back to parent
}, []);
const handleUpdate = useCallback(
(newValue: string) => {
@@ -95,8 +99,10 @@ function DurationInput({
ref={inputRef}
initialValue={timeString}
allowSubmitSameValue={!lockedValue} // if the value is not locked, submitting will lock the value
submitOnTab={false}
handleUpdate={handleUpdate}
handleCancelUpdate={handleFakeBlur}
handleTabCancel={handleTabOut}
/>
) : (
<TextLikeInput
@@ -8,13 +8,24 @@ interface SingleLineCellProps {
fieldId?: string;
fieldLabel?: string;
allowSubmitSameValue?: boolean;
submitOnTab?: boolean;
handleUpdate: (newValue: string) => void;
handleCancelUpdate?: () => void;
handleTabCancel?: () => void;
}
const SingleLineCell = forwardRef(
(
{ initialValue, fieldId, fieldLabel, allowSubmitSameValue, handleUpdate, handleCancelUpdate }: SingleLineCellProps,
{
initialValue,
fieldId,
fieldLabel,
allowSubmitSameValue,
submitOnTab,
handleUpdate,
handleCancelUpdate,
handleTabCancel,
}: SingleLineCellProps,
inputRef,
) => {
const ref = useRef<HTMLInputElement | null>(null);
@@ -25,7 +36,9 @@ const SingleLineCell = forwardRef(
allowKeyboardNavigation: true,
submitOnEnter: true, // single line should submit on enter
submitOnCtrlEnter: true,
submitOnTab,
onCancelUpdate: handleCancelUpdate,
onTabCancel: handleTabCancel,
});
// expose a subset of the methods to the parent
@@ -50,6 +50,10 @@ function TimeInputDuration({
setIsEditing(false);
setTimeout(() => textRef.current?.focusParentElement()); // Immediate timeout to ensure state change takes place first
};
const handleTabOut = useCallback(() => {
setIsEditing(false);
// Tab moves focus naturally; do not steal it back to parent
}, []);
const handleUpdate = useCallback(
(newValue: string) => {
@@ -96,8 +100,10 @@ function TimeInputDuration({
ref={inputRef}
initialValue={timeString}
allowSubmitSameValue={!lockedValue} // if the value is not locked, submitting will lock the value
submitOnTab={false}
handleUpdate={handleUpdate}
handleCancelUpdate={handleFakeBlur}
handleTabCancel={handleTabOut}
/>
) : (
<TextLikeInput