Animation fps limit setting doesn't reset on blur after entering an invalid value

Did you clear cache before opening an issue?

• I have cleared my cache

Is there an existing issue for this?

• I have searched the existing open and closed issues

Does the issue happen when logged in?

Yes

Does the issue happen when logged out?

Yes

Does the issue happen in incognito mode when logged in?

Yes

Does the issue happen in incognito mode when logged out?

Yes

Account name

No response

Account config

No response

Current Behavior

When the animation fps limit setting it set to native, an invalid value is entered in the field below, and the field is blurred, the invalid value remains and isn't emptied.

Expected Behavior

Field should empty on blur if an invalid value has been entered and the current value is native.

Steps To Reproduce

1. Go to https://monkeytype.com/settings?highlight=animationFpsLimit
2. Click on native
3. In the field below it, enter asdf
4. Click outside of the field
5. Notice how asdf remains in the field

Environment

• OS: Arch Linux
• Browser: Firefox
• Browser Version: 151.0.4

Anything else?

A very brief summary of my debugging attempt:

When the attribute list of an element contains spreads:

https://github.com/monkeytypegame/monkeytype/blob/d7eb4b76f3b3000199022ea52a52365b9346b8d0/frontend/src/ts/components/ui/form/InputField.tsx#L107-L108

solidjs compiles the code differently, causing it to use the spread function, rather than using direct assignment via effect. When using spread, it will only write to the dom (element.value = ...) if the return value of convertValueToString changes, rather than writing whenever props.field().state.value changes. In the case of our animation fps limit setting, typing asdf will set props.field().state.value to undefined (which gets converted to an empty string by convertValueToString:

https://github.com/monkeytypegame/monkeytype/blob/d7eb4b76f3b3000199022ea52a52365b9346b8d0/frontend/src/ts/components/ui/form/InputField.tsx#L161

And when we reset on blur, we reset to the default value which is also an empty string. The value hasn't changed, so solid doesn't write to the dom and as a result the invalid value isn't removed.

Start in frontend/src/ts/components/ui/form/InputField.tsx, especially the attribute handling around lines 107-108 and convertValueToString around line 161. Reproduce the issue through the animationFpsLimit settings field by entering an invalid value and blurring it. Done means the invalid value is removed when the current setting is native, including when the internal value resets to an empty string.