User-event: Leading numbers trimmed when using type for decimals in numeric input

[tadger]

• @testing-library/user-event version: 12.0.2
• Testing Framework and version: jest 26.0.1
  
• DOM Environment: jsdom 16.2.2
  

What you did:
_Testing floating point values entered asynchronously into numeric text using type. I had mentioned this at the end of #336, and finally got around to testing it today. I've updated the sandbox dependencies. I've also updated the tests to reflect the new API changes._

What happened:
_The leading numbers (before decimal point) are getting trimmed off in my tests._

Reproduction sandbox:
https://codesandbox.io/s/user-event-decimals-trimmed-hf0wx

[nickmccurdy]

Could this be related to #346?

[lourenci]

Can I try this one?

[kentcdodds]

Please do! :)

[lourenci]

I don't know why (yet) but sending an input event with a point in the end will empty the input value. E.g.:

  fireEvent.input(input, {
    target: { value: '3' },
    data: '3',
    inputType: 'insertText'
  })
  console.log(input.value) // "3"

  fireEvent.input(input, {
    target: { value: '3.' },
    data: '.',
    inputType: 'insertText'
  })
  console.log(input.value) // ""

So any value I got before "typing" the point turn empty when I "type" the ".".

I don't know yet whether this is a user-event, a jsdom, or a fireEvent bug. What do you guys think about that?

I think it's easy to solve here once we settle on an userEvent bug.

[nickmccurdy]

Can that be replicated using raw DOM events in JSDOM?

[lourenci]

I can't replicate even a common change in my browser. 😞 I don't know why, but this snippet does not change the input value:

inputElement.dispatchEvent(new InputEvent('input', {
  bubbles: true, cancelable: false, composed: true, data: '1', inputType: 'insertText'
}))

Maybe, just trusted input events can change the input's value?

[kentcdodds]

You're getting issues because 3. is an invalid value in a number input so you can't programmatically set that value. This is why we have the complex logic we do in the type utility.

Also, the value is set programmatically in the fireEvent utility in DOM Testing Library. Which is why you can't do it by dispatching an event. I suggest diving into the code a bit. I'm on my phone, but you should be able to find it.

[lourenci]

I'll handle that on the type utility so. Thank you guys for the helper.

[kentcdodds]

:tada: This issue has been resolved in version 12.0.5 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket: