fix(edit-modal): Listening Length throws "trim is not a function" on every keystroke

[kevinheneveld]

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