Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
just-boris opened this issue Feb 27, 2021 · 5 comments
Labels
bug Something isn't working

Comments

@just-boris
Copy link

just-boris commented Feb 27, 2021

  • @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
Copy link
Member

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
Copy link
Author

Updated the original comment

@ph-fritsche
Copy link
Member

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.

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 added a commit that referenced this issue Feb 28, 2021
* fix(click): focus closest focusable

* refactor: remove redundant check
@ph-fritsche
Copy link
Member

@all-contributors add @just-boris bug

@allcontributors
Copy link
Contributor

@ph-fritsche

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

@nickserv nickserv added the bug Something isn't working label Mar 6, 2021
This was referenced Mar 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants