Support "enter" keydown on button

[patricklafrance]

In a browser, enter keydown trigger the click event of the button.

It would be nice if the user-event library support this behavior.

You can test the browser behavior here: https://codesandbox.io/s/jovial-glitter-jy883?from-embed

A naive implementation would be to add a keyDown function to user-event:

    keyDown(element, options) {
        fireEvent.keyDown(element, options);

        if (element.tagName === "BUTTON") {
            fireEvent.click(element);
        }
    }

Thank you,

Patrick

[weyert]

Hmm, but here you aren't testing for the enter-key but now everything can trigger the click event?

[nickmccurdy]

Does that work on all elements though? Or just form controls?

[weyert]

Good question, I would assume it's a typical button behaviour?

[nickmccurdy]

I wrote my own test and got some interesting results: https://codepen.io/nickmccurdy/pen/RwweGxG?editors=1010

To summarize, all buttons (using <button> or <input type="some button type">) except radio buttons fire click events when return is hit. Radio buttons only fire click events when space is hit. As far as I'm aware, others elements do not fire click events on key press.

[weyert]

Okay, thanks for testing this @nickmccurdy!
Thinking now how to best way to implement this 🤔

[jamesonhill]

This would be super helpful for me as well, due to this issue w/ fireEvent. testing-library/react-testing-library#551

In my case, I have to support a submit-like event for textarea's onKeyPress for "Enter".

[kentcdodds]

This is now supported with userEvent.type(button, '{enter}')

[jamesonhill]

@kentcdodds Awesome! Thanks so much :)

[neaumusic]

Regarding '{enter}' it looks like they're still just using fireEvent.keyDown internally:

user-event/src/type.js

Lines 109 to 118 in 4bbb4b9

	'{enter}': async ({eventOverrides}) => {
	const key = 'Enter'
	const keyCode = 13
	const keyDownDefaultNotPrevented = fireEvent.keyDown(currentElement(), {
	key,
	keyCode,
	which: keyCode,
	...eventOverrides,
	})

[Phebonacci]

This is now supported with userEvent.type(button, '{enter}')

It appears that this will also trigger the onClick event of the button before the keypress is triggered. So if we pass the same callback for both onClick and onKeydown, it will be called twice. To avoid this, we need skipClick set to true.

[ahayes91]

Feel free to correct me if there's another way to do it, but I found userEvent.type(button, '{enter}') didn't work for me today to fire the onClick event on a button (maybe this has changed since this ticket was implemented).

I stripped it down to a regular old button and found focusing the button and using userEvent.keyboard('{enter}') was the way to do it (still on user-event v 13.5, FYI):

  it("Using Enter key on regular button should fire onClick event", async () => {
    const mockOnClick = jest.fn();
    render(<button onClick={mockOnClick}>Button</button>);
    const button = screen.getByRole("button");
    button.focus();
    userEvent.keyboard("{enter}");
    await waitFor(() => expect(mockOnClick).toHaveBeenCalledTimes(1));
  });

[chrisspadanuta]

Where is userEvent imported from?

[jamesonhill]

Where is userEvent imported from?

It's the default export from @testing-library/user-event

[Illutax]

FYI: .focus() is not necessary when you interacted with the input before e.g. typed something into a text input.

[neaumusic]

There's something fishy about user-event enter keypress, which is still 0 and I noticed charCode is assigned in a one-off line, somewhere around dispatchUIEvent for keydown