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

[kelvinlzhang]

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, 'testing@gmail.com')
    expect(input.value).toBe('testing@gmail.com')
})

2. Run test
3. InvalidStateError

What happened: I wanted to follow up on this comment and reproduce: #307 (comment). 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.

[tpict]

I'm seeing the same behavior for type="number" with valid input

[kelvinlzhang]

Yeah, something funky going on with validated character input types.

[kentcdodds]

Thanks for this @kelvinlzhang! Would you be interested in digging in and figuring out the issue?

[kentcdodds]

@tpict you're welcome to try as well 😁

[kelvinlzhang]

@kentcdodds error is caused by setSelectionRange on line 32

https://stackoverflow.com/questions/21177489/selectionstart-selectionend-on-input-type-number-no-longer-allowed-in-chrome

Seems like a lot of people aren't too happy about this :(

[tpict]

Looks like user-event handles this elsewhere by simply switching out the type of the input for the function's lifetime. Would that be a reasonable fix here, or is it off the table on account of type being asynchronous?

[kentcdodds]

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

[Meemaw]

This is the same problem as fixed in #262 for the "clear" function. The fix function should probably be extracted and reused.

[nvh95]

While making the dev tools to automate some tasks for my application, I'm seeing the same problem while trying to use userEvent.type on an input with type="email".
Bellow is my element

<div>
  <label>Email</label>
  <input
    type="email"
    data-testid="input-email"
  />
</div>

And my script to fill the email

await userEvent.type(
  await screen.findByTestId('input-email'),
  'myemail@example.com',
);

Only one character is inserted

And in Chrome Console I get this error

The problem faded away when I switch type from 'email' to 'text'

[kentcdodds]

@all-contributors please add @kelvinlzhang for bugs

[allcontributors]

@kentcdodds

I've put up a pull request to add @kelvinlzhang! 🎉

[kentcdodds]

@all-contributors please add @tpict for bugs, code, and tests

[allcontributors]

@kentcdodds

I've put up a pull request to add @tpict! 🎉

[kentcdodds]

@all-contributors please add @nvh95 for bugs

[allcontributors]

@kentcdodds

I've put up a pull request to add @nvh95! 🎉

[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 📦🚀