React input type="number" onChange not triggering from userEvent.keyboard('{backspace}')

[micscopau]

• @testing-library/user-event: 13.2.1
• @testing-library/dom: 8.1.0
• @testing-library/jest-dom: 5.14.1
• @testing-library/react: 12.0.0
• Jest - 27

What you did:
Performing a userEvent.keyboard('{backspace}') does not work correctly for a React Typescript input type = "number". Same behavior occurs for delete, ArrowUp, and ArrowDown.

What happened:
onKeyDown is triggered, but onChange is never triggered.

Reproduction repository:
https://codesandbox.io/s/user-event-input-typenumber-bug-3c9tr

Problem description:
Issue is only present on type = "number" input, if changing the same component to type = "text" the backspace/delete keys properly trigger onChange. (I understand the complexity of arrow keys being problematic on a text input, but seemingly the number input up/down arrow keys should perform the simple step increments).
Have tried all variations of calling a userEvent.click(input), or userEvent.dblClick(input) or input.focus() prior to attempting the userEvent.keyboard('{backspace}') and doing a input.blur() after attempting to delete input, all with same results of onChange not triggereing for a type = number input.

[ph-fritsche]

Thanks a lot for the report. ❤️

Spinner action for ArrowUp and ArrowDown is not implemented yet.
https://github.com/testing-library/user-event/blob/main/src/keyboard/plugins/arrow.ts
A PR would be welcome.

Editing the number input is tricky as selectionStart/selectionEnd/setSelectionRange does not work on number inputs.
https://github.com/jsdom/jsdom/blob/ba8e5806d1a23960a03c3dd99af98fd0916b4bc9/lib/jsdom/living/nodes/HTMLInputElement-impl.js#L45

So our function recognizes the cursor to be at 0,0.
When editing we use an internal workaround (diverging from real state of the document) so userEvent.keyboard('0{Backspace}') would work on an empty number input as expected.

You can use userEvent.type for now as it will set the selection range initially by the same means.

[ph-fritsche]

Value tracking and selection on type="number" resolved in #744 / #747
Selection on mouse events resolved in #763
See corrected and commented https://codesandbox.io/s/user-event-input-type-number-bug-forked-bnd5v

Closing this as the primary issue is resolved

PR for spinner behavior still welcome.

[sielay]

I think the issue is not fully resolved. The input[type=number] still gives values as strings, so the default empty value is '' and some UI expects it rather than 0. In such a case in a browser, if we press arrow up it would first parse empty value to 0 and then jump to 1. If you track events it will happen before keyUpCapture. When using your lib, that is not happening and the test linked in the sandbox will fail, if you change the default value to ''.

"react": "^17.0.1",
"@testing-library/dom": "^8.11.1",
"@testing-library/user-event": "^13.5.0",

[ph-fritsche]

The PRs resolving the initial issue (editing the displayed value at the displayed selection while neither is programmatically available) are merged on 14.0.0-alpha. Please check with that version.

The spinner action as mentioned above is not implemented yet though.
If you'd like this functionality to be added, a PR adding this and/or a new issue describing the exact expected behavior, would be very much welcome.