diff --git a/src/components/Input/InputSmall.tsx b/src/components/Input/InputSmall.tsx index 0adffff13..412f51e03 100644 --- a/src/components/Input/InputSmall.tsx +++ b/src/components/Input/InputSmall.tsx @@ -35,18 +35,42 @@ const InputSmall = (props: Props) => { value, } = props; - const handleChange = (event: ChangeEvent) => { - if (type === 'number' && max && event.target.valueAsNumber > max) { - toast.info(`Value cannot be greater than ${max}!`); + const defineOwn = (target: object, name: string, ownValue: unknown) => { + Object.defineProperty(target, name, { value: ownValue, writable: true, enumerable: true, configurable: true }); + }; - const newEvent = { ...event }; - newEvent.target.value = max.toString(); - newEvent.target.valueAsNumber = max; + const withValue = (event: ChangeEvent, nextValue: string) => { + // Prototype-preserving clone of the DOM target; own properties are defined (not + // assigned) so the accessors on the prototype chain (React's value tracker, + // native valueAsNumber) are shadowed instead of invoked ("Illegal invocation"). + const target = Object.create(event.target) as HTMLInputElement; + defineOwn(target, 'value', nextValue); + defineOwn(target, 'valueAsNumber', nextValue === '' ? Number.NaN : Number(nextValue)); + + return { ...event, target } as ChangeEvent; + }; - onChange(newEvent); + const handleChange = (event: ChangeEvent) => { + if (type !== 'number') { + onChange(event); return; } + const { valueAsNumber } = event.target; + if (Number.isFinite(valueAsNumber)) { + if (max !== undefined && valueAsNumber > max) { + toast.info(`Value cannot be greater than ${max}!`); + onChange(withValue(event, max.toString())); + return; + } + + if (min !== undefined && valueAsNumber < min) { + toast.info(`Value cannot be less than ${min}!`); + onChange(withValue(event, min.toString())); + return; + } + } + onChange(event); }; diff --git a/src/components/Utilities/LinkFilesWithProvider/EditReleaseInfoModal.tsx b/src/components/Utilities/LinkFilesWithProvider/EditReleaseInfoModal.tsx index 309904467..40dabf466 100644 --- a/src/components/Utilities/LinkFilesWithProvider/EditReleaseInfoModal.tsx +++ b/src/components/Utilities/LinkFilesWithProvider/EditReleaseInfoModal.tsx @@ -431,7 +431,7 @@ const EditReleaseInfoModal = (props: Props) => { }, { scopes: 'modal' }, ); - useHotkeys('r', () => handleEpisodeSelect(RANGE_FILL_EPISODE_ID), { scopes: 'modal' }); + useHotkeys('r', () => handleEpisodeSelect(RANGE_FILL_EPISODE_ID), { scopes: 'modal', preventDefault: true }); useHotkeys('enter', handleSave, { scopes: 'modal' }); return (