onChange of input is not fired, if userEvent.type is used

[wuarmin]

Hey, thank you for this library.

I have following issue and cannot figure out what I'm doing wrong.

"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^13.0.13",
"@testing-library/dom": "^7.30.0",

Relevant code, which causes the issue:

// test of a parent component - the input comes from a sub-component, which uses onChange-event
const input = screen.getByPlaceholderText(/name/i);
const searchButton = screen.getByRole("button", { name: /search/i });

await userEvent.type(input, "Knight", { delay: 500 }); // onChange-event is not fired!!!
userEvent.click(searchButton);
// search-handler cannot place search, because name-input-value is empty
 

fireEvent works

const input = screen.getByPlaceholderText(/name/i);
const searchButton = screen.getByRole("button", { name: /search/i });

fireEvent.change(input, { target: { value: "Knight" } }); // onChange-event is fired!!!
userEvent.click(searchButton);
// search-handler can place the search

[stuartaylward]

I am also seeing this issue.

[ph-fritsche]

fireEvent.change dispatches a change event.

userEvent.type simulates a user typing. There is a lot happening so there is a multitude of possible errors.

1. None of the things happening is a change event as <input> elements don't dispatch change events when the value is overwritten but when the element loses focus.
   React dispatches a SyntheticEvent change for InputEvent on controlled elements.

2. The element might never gain focus.

3. The element might prevent changes e.g. by preventing default behavior on keydown.

These and a couple more could be wrong with the implementation.

Please provide a reproduction example!
Try setting up a codesandbox that showcases the problem. You might find your errors just by trying to reproduce the behavior there.
And if not, someone more experienced with the ecosystem might spot the error in the blink of an eye.

We're happy to help but vague descriptions waste everybody's time.

[yuritoledo]

I had the same problem

This works

 fireEvent.change(screen.getByTestId('asdasd'), {
      target: { value: 'hahahahahahahaha' },
    });

this doesn't

    userEvent.type(screen.getByTestId('asdasd'), 'hahahahahahahaha');

[0fprod]

#930 (comment)

[lionffl]

Try to use await on userEvent.click too:

await userEvent.type(input, "Knight");
await userEvent.click(searchButton);

[JJBocanegra]

Adding userEvent.tab() after the userEvent.type() also works.

[bokerize]

what i noticed was that when the input field has an onChange in it, userEvent.type doesn't always work (it's inconsistent..) @JJBocanegra 's userEvent.tab() is a great workaround.

[gevgeny]

None of the above recommendations worked for me, so I replaced onChange with onInput in the implementation without updating a test, and it helped.