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

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

[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');

[lionffl]

Try to use await on userEvent.click too:

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