Problem
Editing Listening Length (minutes) in the audiobook edit modal throws on every keystroke. Each digit produces an "Unexpected Error — Something went wrong. Please refresh the page." toast, and after a few keystrokes the modal tears down.
Root cause
The field is <input type="number" v-model="formData.runtime">. Vue's v-model coerces a type="number" input to a JS number — vModelText casts whenever el.type === 'number', even without the .number modifier. So formData.runtime holds a number at runtime, despite being typed string.
normalizeNumericInput then runs:
return (value || '').trim()Number.prototype has no .trim(), so this throws TypeError: (value || "").trim is not a function. It's invoked from the dirty-check (hasChanges) which re-evaluates on every keystroke. Vue's global errorHandler catches it (hence the toast rather than a console error), and the repeated failure unmounts the modal.
An empty field is '' (a genuine string), which is why it only surfaces once a digit is typed.
Fix
Harden normalizeNumericInput / parseRuntimeInput to accept string | number and String()-coerce before trimming:
function normalizeNumericInput(value: string | number | null | undefined): string {
return (value == null ? '' : String(value)).trim()
}Verification
Reproduced in a real browser by hooking the running app's errorHandler to capture the swallowed stack (TypeError: (e || "").trim is not a function), confirmed every keystroke threw and the 3rd closed the modal. After the fix: typing 452 leaves the modal open with zero error toasts and the field value intact. vue-tsc passes.
🤖 Generated with Claude Code
Automated Canary build