userEvent.clear() fails

[nemanjam]

Why simple clear() and type() in field does not work? Such a simple and trivial thing and it does not work, it creates race while typing. Very annoying and time wasting. Version: "@testing-library/user-event": "^14.2.0".

Example from docs is broken.

https://testing-library.com/docs/user-event/utility#clear

More info about this bug is that the input field is frozen for first 2 characters (interactions). Just typing a bit in the field fixes it. Either userEvent v14 or React Hook Form v8 are broken.

// NOTE: this fixes a bug in userEvent.clear() or React Hook Form
// field is frozen for first 2 characters
// user0 name + 123 -> user0 name3
await userEvent.type(nameInput, '123');

// edit name
await userEvent.clear(nameInput);
expect(nameInput).toHaveValue(''); // now it works

[fcastillo18]

Hi @nemanjam!
Did you get a solution for this?

I'm also facing that same error after upgrading to userEvent v14

[matheustrindade]

Although it works, it seems to be just a workaround... 😞
Do we have any update about that issue?

[kellyrmilligan]

just encountered this as well 😢 and calling it twice worked.

[yosipy]

I don't know the cause of this problem (I am using React hook form).
It may look better if you write the following

await waitFor(async () => {
  await userEvent.clear(nameInput)
  expect(nameInput).toHaveValue('')
})

[KovalovV]

also faced this problem
here is the part of the code that did not work correctly

      await user.clear(firstNameInput);
      await user.clear(emailInput);
      await user.clear(lastNameInput);
      await user.clear(phoneInput);

      await user.type(firstNameInput, 'New Name');
      await user.type(lastNameInput, 'New Surname');
      await user.type(emailInput, 'new@gmail.com');
      await user.type(phoneInput, '0971111111');

      await user.click(getByText('Save'));

in my case it worked after I added a click event to the first input

      await user.click(firstNameInput);

      await user.clear(firstNameInput);
      await user.clear(emailInput);
      await user.clear(lastNameInput);
      await user.clear(phoneInput);

      await user.type(firstNameInput, 'New Name');
      await user.type(lastNameInput, 'New Surname');
      await user.type(emailInput, 'new@gmail.com');
      await user.type(phoneInput, '0971111111');
      
      await user.click(getByText('Save'));

[rmonteiro89]

Thanks @KovalovV! The click was the hint that worked for me!

[marcebdev]

This is still an issue for what it's worth, it should probably be opened as an issue because I don't see one. The additional click method worked for me though!

[josandre]

I found out that if you focus the input first, the clear works.

 const input = screen.getByRole('input');
  input.focus();
  await userEvent.clear(input);
  await userEvent.type(input, '200')