Support "enter" keydown on button

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

[kentcdodds]

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

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