type() truncates numbers before the decimal point for number inputs

[tbertrand7]

Reproduction example

https://codesandbox.io/s/stoic-snow-vcz5kz

Prerequisites

1. Render an input with type="number"
2. Execute type() on the number input with a decimal value (ex. await user.type(screen.getByTestId('input'), '12.55'))

Expected behavior

12.55 is typed into the number input.

Actual behavior

The numbers before the decimal point are truncated and 55 is typed into the number input.

User-event version

14.0.0

Environment

Testing Library framework:

JS framework:

Test environment:

DOM implementation:

Additional context

No response

[ph-fritsche]

Thanks for the report ❤️

This seems to be a conflict with Reacts event handling.
The input event for . is discarded in the browser. In the test React triggers the onChange handler with it.
https://codesandbox.io/s/cranky-andras-d4v5kf?file=/src/App.test.js

Works fine with native DOM: https://codesandbox.io/s/hardcore-cdn-luv4rk?file=/src/App.js

[ph-fritsche]

setUIValue calls the native setter for value on every call.
When the . is added the element.value = '12.' results in element.value === '' which is picked up by React as a changed value on the input event.
I think we have to discard the call to the native setter.

In uncontrolled elements this is just overwritten by the next call. setUIValue(element, '12.5') => element.value === '12.5'

[ph-fritsche]

For 2e5 every input has a native and a SyntheticEvent - the rerender with val === '' still doesn't reset the element UI value.
https://codesandbox.io/s/hidden-fast-4l9p6l?file=/src/App.test.js

[ph-fritsche]

This is an issue with Jsdom. It works fine in the browser:
https://codesandbox.io/s/lucid-mestorf-fpwdlc?file=/src/App.js

[ph-fritsche]

This is a mixup of Jsdom not implementing value like the browser and our workaround for React's subsequent reset and update of controlled elements in tests.

[github-actions]

🎉 This issue has been resolved in version 14.0.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[ph-fritsche]

@all-contributors add @tbertrand7 bug