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:
parent
df721850e0
commit
106ca49f6f
1 changed files with 29 additions and 12 deletions
|
|
@ -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`}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue