LabeledTextField type number does not apply values by arrow buttons in Firefox

[Slein2012]

What is the problem?

When using an LabeledTextField type="number" in Firefox the value of that field can be changed by the arrow buttons on the right side of the input field, but when the form gets submitted they do not submit any values. If one change the text field's value by hand and not by the arrow buttons the value gets submitted correctly. In Chrome both, the selection by the arrow buttons and the manual input return the selected value.

Paste all your error logs here:

none

Paste all relevant code snippets here:

<LabeledTextField
name="test"
label="Test Field"
type="number"
defaultValue="0"
onChange={handleChange}
max={1000}
min={0}
/>

Output on Firefox:
- Manual input 2 via keyboard:
- - test: '2'
- Input 2 by clicking two times on the up arrow in the input field
- - test: '0' (defaultValue)

Output on Chrome:
- Manual input 2 via keyboard:
- - test: '2'
- Input 2 by clicking two times on the up arrow in the input field
- - test: '2'

What are detailed steps to reproduce this?

1. create a LabeledTextField type number
2. input value via keyboard in Firefox => works
3. input value via arrow keys generated by type="number" => returns emty string or defaultValie if defined
4. try the same on Chrome => both works

Run blitz -v and paste the output here:

Windows 10 | win32-x64 | Node: v14.15.0

blitz: 0.38.2 (local)

  Package manager: npm 
  System:
    OS: Windows 10 10.0.19043
    CPU: (4) x64 Intel(R) Core(TM) i5-6400 CPU @ 2.70GHz
    Memory: 1005.78 MB / 7.95 GB
  Binaries:
    Node: 14.15.0 - C:\Program Files\nodejs\node.EXE    
    Yarn: Not Found
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  npmPackages:
    @prisma/client: 2.26.0 => 2.26.0
    blitz: 0.38.2 => 0.38.2
    prisma: 2.26.0 => 2.26.0
    react: alpha => 18.0.0-alpha-cae635054-20210626
    react-dom: alpha => 18.0.0-alpha-cae635054-20210626
    typescript: ~4.3 => 4.3.4

Please include below any other applicable logs and screenshots that show your problem:

No response

[flybayer]

Interesting! Sounds like a bug with the form library maybe.

Which form library are you using?

[Slein2012]

I'm currently using React-Hook-Form v.7.9.0

[flybayer]

Ok then very likely it's a bug there. Blitz doesn't do anything with forms itself. I recommend making a minimal reproduction with RHF and opening an issue in their repo.

[MrLeebo]

Closing this because it seems like it's gone stale and I am unable to repro. If it's still a problem, can you please provide a working repro that showcases the issue? https://codesandbox.io/s/github/blitz-js/codesandbox-template