type causes InvalidStateError with <input type="email">

Occurs in master of @testing-library/user-event version: 11.2.1

Here’s an example failing test, not really up to this library’s standards but I wanted to get as close to the source as possible.

STR:

1. Add the following block to src/__tests__/type.js

const create = () => {
    const utils = render(<input aria-label="input" type="email"/>)
    const input = utils.getByLabelText('input')
    return {
        input,
        ...utils,
    }
}

it('types text in email input', async () => {
    const { input } = create()
    await userEvent.type(input, '[e-mail]')
    expect(input.value).toBe('[e-mail]')
})

1. Run test
2. InvalidStateError

What happened: I wanted to follow up on this comment and reproduce: https://github.com/testing-library/user-event/issues/307#issuecomment-639226751. Sorry @kentcdodds, the type= was abstracted away and it was pretty silly of me to assume it was text. Seems like I ran into 2 completely different issues now, but hopefully I’m just missing something obvious.

Test fails on InvalidStateError, adding an onChange handler with a console.log(event.target.value) shows that type only enters in the first char before breaking.

[kentcdodds]

That’s what I was thinking. Want to give it a try?

[kentcdodds]

🎉 This issue has been resolved in version 11.3.1 🎉

The release is available on:

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

Your semantic-release bot 📦🚀