fix: allow free-form editing of pause point timestamp input

The input was reformatting with .toFixed(3) on every keystroke, causing
backspace to appear to insert random digits. Changed to string-based
input state with conversion/validation only on blur or save.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
michael 2026-01-12 14:50:44 -06:00
parent df721850e0
commit 106ca49f6f

View file

@ -20,11 +20,14 @@ export function PausePointEditor({
}: PausePointEditorProps) {
const effectiveMs = pausePoint.adjusted_ms ?? pausePoint.original_ms;
const [value, setValue] = useState(effectiveMs);
const [inputValue, setInputValue] = useState((effectiveMs / 1000).toFixed(3));
const [error, setError] = useState<string | null>(null);
const inputRef = useRef<HTMLInputElement>(null);
useEffect(() => {
setValue(pausePoint.adjusted_ms ?? pausePoint.original_ms);
const ms = pausePoint.adjusted_ms ?? pausePoint.original_ms;
setValue(ms);
setInputValue((ms / 1000).toFixed(3));
}, [pausePoint]);
useEffect(() => {
@ -43,18 +46,19 @@ export function PausePointEditor({
return null;
};
const handleValueChange = (newValue: number) => {
setValue(newValue);
setError(validateValue(newValue));
};
const handleSave = () => {
const validationError = validateValue(value);
const parsed = parseFloat(inputValue);
if (isNaN(parsed)) {
setError('Invalid number');
return;
}
const ms = Math.round(parsed * 1000);
const validationError = validateValue(ms);
if (validationError) {
setError(validationError);
return;
}
onSave(value);
onSave(ms);
};
const handleKeyDown = (e: React.KeyboardEvent) => {
@ -65,6 +69,18 @@ export function PausePointEditor({
}
};
const handleBlur = () => {
const parsed = parseFloat(inputValue);
if (isNaN(parsed)) {
// Revert to previous valid value
setInputValue((value / 1000).toFixed(3));
return;
}
const ms = Math.round(parsed * 1000);
setValue(ms);
setError(validateValue(ms));
};
const formatMs = (ms: number) => {
const totalSeconds = Math.floor(ms / 1000);
const minutes = Math.floor(totalSeconds / 60);
@ -101,11 +117,12 @@ export function PausePointEditor({
<div className="flex items-center gap-2">
<input
ref={inputRef}
type="number"
value={(value / 1000).toFixed(3)}
onChange={(e) => handleValueChange(Math.round(Number(e.target.value) * 1000))}
type="text"
inputMode="decimal"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onBlur={handleBlur}
onKeyDown={handleKeyDown}
step="0.001"
className={`flex-1 px-2 py-1 text-sm border rounded ${
error ? 'border-red-500' : 'border-gray-300'
} focus:outline-none focus:ring-2 focus:ring-blue-500`}