userEvent.clear() does not fire onChange handlers

[justinanastos]

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();
});

[rfoel]

I'm getting InvalidStateError: The object is in an invalid state. when I call the clear method 🤔

[kentcdodds]

Looks like clear calls into backspace (after selecting all the contents) and this fires an input event:

user-event/src/index.js

Lines 128 to 130 in ee8aa5c

	fireEvent.input(element, {
	inputType: "deleteContentBackward",
	});

I didn't write this or review these PRs so I'm not sure why it's working this way (I expect there's some reason for this). In general, I think our goal is to match what cypress does to do these kinds of things. If someone wants to investigate and make sure we're following what cypress does. This may be as simple as also firing a change event as well as the input event. But let's do some investigation.

[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.

user-event/src/index.js

Line 215 in ee8aa5c

element.addEventListener("blur", fireChangeEvent);

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 } = {}) {

[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!

[tgallacher]

I think this issue should have been auto closed by #286.

I recon it's the extra "issue" word after the "Resolves" Github keyword which has prevent the auto close trigger.