`userEvent.clear()` does not fire `onChange` handlers

Reproduction: https://github.com/justinanastos/user-event-clear-bug

I’m finding that onChange handlers are not being fired when using userEvent.clear(getBy...).

This is both a bug report and a request for help. I’m not sure what I’m doing wrong here:

import '@testing-library/jest-dom/extend-expect';
import { render, screen } from '@testing-library/react';
import React from 'react';
import userEvent from '@testing-library/user-event';

it('calling userEvent.clear() should call onChange on an input', () => {
  const onChange = jest.fn();

  render(
    <label>
      example
      <input defaultValue="default value" onChange={onChange} />
    </label>,
  );

  expect(screen.getByLabelText('example')).toHaveValue('default value');
  userEvent.clear(screen.getByLabelText('example'));
  expect(screen.getByLabelText('example')).toHaveValue('');

  // This test fails
  expect(onChange).toHaveBeenCalled();
});

[kentcdodds]

I’d love to know why that code existed in the first place. But as the original maintainer of this project seems to have stopped maintaining it, I think we should just go forward with what makes the most sense.

Go ahead and make the PR. Thank you!

[justinanastos]

Thanks @kentcdodds . First, I verified performing .type('{selectall}{backspace}') both clears the input and fires the onChange handler in this demo repo: https://github.com/justinanastos/user-event-clear-bug-cypress

The clear command adds an event handler for blur in which it will execute the on change handler; I’m not seeing this fired even when adding a blur event to the test, which probably shouldn’t be necessary if this is attempting to mirror the behavior of Cypress.

https://github.com/testing-library/user-event/blob/ee8aa5c2a7457132de6ab06a13df7e37697a99be/src/index.js#L215

I’m happy to open a PR to immediately fire an onChange event if that’s a path you’d be willing to accept.

diff --git a/src/index.js b/src/index.js
index 352ce9e..c9e23c8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -100,11 +100,6 @@ function selectOption(select, option) {
   fireEvent.change(select);
 }
 
-function fireChangeEvent(event) {
-  fireEvent.change(event.target);
-  event.target.removeEventListener("blur", fireChangeEvent);
-}
-
 const userEvent = {
   click(element) {
     const focusedElement = element.ownerDocument.activeElement;
@@ -237,7 +232,7 @@ const userEvent = {
         });
       }
     }
-    element.addEventListener("blur", fireChangeEvent);
+    fireEvent.change(event);
   },
 
   tab({ shift = false, focusTrap = document } = {}) {