User-event: 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. https://github.com/testing-library/react-testing-library/issues/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:

https://github.com/testing-library/user-event/blob/4bbb4b9a6e33641bb2bec3830b6f97e373e29541/src/type.js#L109-L118