click handler should not fire blur when the click target inside currently focused element

[just-boris]

• @testing-library/user-event version: 7.29.6 (latest at the time of writing)

• Testing Framework and version: n/a

• DOM Environment: Tested in Chrome/Safari/Firefox

Steps to reproduce

1. Open this CodeSandbox: https://rvh87.csb.app/
2. Click on "click with user-event" button
3. You will see "blur" logs in the console
4. Click on "test button" directly
5. There are no "blur" logs in the console

Code Example:

Codesanbox source: https://codesandbox.io/s/rvh87

<button class="to-test">
  <span>test button</span>
</button>

userEvent.click(screen.getByText("test button"));

Suggested solution:

The library should check if the click target is inside already focused container and should not blur it.

[ph-fritsche]

Please share the link to the codesandbox as you see it in your address bar / per click on "Share"->"Copy sandbox link" not just the browser output.

The reproduction in the sandbox serves as an easily accessible reference point for everybody running into this issue or working on it.

[just-boris]

Updated the original comment

[ph-fritsche]

The problem seems to be that userEvent tries to move the focus to the clicked element (here the <span>).
Since that is not focusable the focus is moved to the document.body.

user-event/src/click.js

Line 68 in 7a5c51e

if (previousElement && !isFocusable(element)) {

I think the solution is to check if one of the parents is focusable and move the focus there.

[ph-fritsche]

@all-contributors add @just-boris bug

[allcontributors]

@ph-fritsche

I've put up a pull request to add @just-boris! 🎉