onClick event fired twice by typing "{enter}" or "{space}" on button element

[with-heart]

• @testing-library/user-event version: 12.6.3

• Testing Framework and version: @testing-library/[email protected]
• DOM Environment: [email protected] (I believe this is the version CodeSandbox uses with the default React template)

Relevant code or config

userEvent.type(screen.getByRole('button'), '{enter}')
userEvent.type(screen.getByRole('button'), '{space}')

What you did:

Used either of the above lines on a button element, which should trigger two events:

• onClick with detail: 0 (representing that the event was caused by the keyboard)
• onKeyPress

What happened:

The onClick event is fired twice, once with detail: 0 (correct) and a second time with detail: 1 (incorrect; shouldn't even occur).

In the reproduction below, you can see tests that validate that this is happening, and you can also interact with the button in the Browser tab to see what browser behavior is by default:

• When clicking the button element with the mouse, we receive one onClick event with detail: 1.
• When pressing Enter or Space on the focused button element, we receive one onClick event with detail: 0 and one onKeyPress event.

Reproduction repository:

https://codesandbox.io/s/ecstatic-easley-t6lie?file=/src/button.test.js

Problem description:

I'm working on some hooks that provide WAI-ARIA accordion functionality and I'm attempting to test an event relating to pressing Enter or Space on an accordion header element with role "button". In the case of this element, I'd like to ignore the onClick event that's fired by a keypress and handle the functionality only in onKeyPress.

Suggested solution:

In the handleEnter/handleSpaceOnClickable, fireEvent.click is called on currentElement(), which I believe causes the onClick with detail: 1. I'm unsure what the onClick with detail: 0 is caused by, but I imagine if we're able to consolidate this into a single call with detail: 0, it would resolve the issue.

[ph-fritsche]

The extra click event detail: 1 is cause by the automatic click performed by userEvent.type.
If you call userEvent.click(element, '{enter}', {skipClick: true}) or use userEvent.keyboard('[Enter]') there is only one click with detail: 0.

[with-heart]

@ph-fritsche Good to know! Also thanks for taking the time to collect and understand all of the issues in #521 and doing so much excellent work in #581. The open source world needs more people like you! ❤️