Cannot tab in react-testing-library

[danny-does-stuff]

Summary:

When writing tests using react-testing-library, tabbing does not work properly when inside of a react-modal.

Steps to reproduce:

1. Render a Modal with some tabbable elements
2. Try to tab between elements using @testing-library/user-event userEvent.tab()
3. The focused element does not change 😢

Expected behavior:

The focused element changes when calling userEvent.tab() inside of a react-modal.

Link to example of issue:

https://codesandbox.io/s/xenodochial-mestorf-qx6j8?file=/src/__tests__/index.js

Additional notes:

I'm aware the issue could be in the user-event library, so I made a companion issue over there (clicky). I'm also thinking I could just need more understanding of how the focus trapping is working in react-modal / user-event so I can get them to play together nicely.

[diasbruno]

Hey @dannyharding10, in react-modal we try not to change the browser's default behavior of tabbing. There is only one case we need to intervene and it's for radio buttons on Safari. Other than that we find the first and last "tabbable" elements to try trapping the focus on the modal.

[danny-does-stuff]

@diasbruno interesting, thanks for the tip. Are you saying that you don't believe the issue would be in react-modal because react-modal doesn't really do anything to interfere with tabbing?

[diasbruno]

Yep, but not with 100%, because we do intervene...we have some tests to back it up. 😂

Let me know if you can spot something wrong on our side.

[danny-does-stuff]

Ok thank you, I will be sure to report back here on whatever I find out in the next couple of days

[phyrwork]

We have the same issue and observe that it seems to be introduced between 3.15.1 and 3.16.1.

Code sandbox reproducing issue and original discussion from user-event.