Cannot tab in react-modal

[danny-does-stuff]

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

• Testing Framework and version: Jest, whatever version CodeSandbox uses

• DOM Environment: jsdom, whatever version CodeSandbox uses

Relevant code or config

import Modal from 'react-modal';

function ModalTest() {
  return (
      <Modal isOpen={true}>
         <button>button 1</button>
          <button>button 2</button>
      </Modal>;
}

it('should allow tabbing inside of a modal', () => {
  const { getByText } = render(<ModalTest {...props} />);

  const button1 = getByText("button 1");
  const button2 = getByText("button 2");

  expect(button1).toBeInTheDocument();
  expect(button2).toBeInTheDocument();

  button1.focus();
  expect(button1).toHaveFocus();
  userEvent.tab();
  // fails right here
  expect(button2).toHaveFocus();
});

What you did:

1. Render a Modal from react-modal with some tabbable elements
2. Try to tab between elements using userEvent.tab()

What happened:
3. The focused element does not change 😢

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

Problem description:
Tabbing does not work properly when inside of a react-modal.

Additional notes:

I'm aware the issue could be in the react-modal 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.

[ph-fritsche]

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

Could you please check again with v13.5.0 and/or v14.0.0-beta?
I won't look into possible bugs of a version that is outdated since Jun 21, 2020.

[danny-does-stuff]

@ph-fritsche 🤦‍♂️ I think this fixed it! I was using a CodeSandbox template so I assumed that it was the latest version of user-event. It did not work with v13.5.0, but it did work with v14.0.0-beta. Strangely, I was able to narrow the fix down to v14.0.0-alpha.11, which does not seem to have anything specific to tabbing, which I found odd. Do you have any idea why these changes would have fixed this issue?

Thanks for pointing me in the right direction! Is there a timeline for when v14 will be released?

[ph-fritsche]

Strangely, I was able to narrow the fix down to v14.0.0-alpha.11, which does not seem to have anything specific to tabbing, which I found odd. Do you have any idea why these changes would have fixed this issue?

I don't think this can be right.

Thanks for pointing me in the right direction! Is there a timeline for when v14 will be released?

Not really. You can see the open issues on the milestone. I might be able to resolve the remaining issues this weekend. If we just look at the code, I think this is already worth to be called stable and replace v13.5.0. In fact if you're actively working on a project, I'd recommend to switch now.
The remaining issues could as well be resolved in minor releases.

But before the official release and recommendation to migrate existing projects, I'd like to get a little more feedback to ensure this is working in different environments (see e.g. the issues about the build) so that we won't run into a situation where we would have to switch to v15 after just a few weeks.
Also we need to update the docs.

[christocarr]

@danny-does-stuff did you manage to resolve your issue? I'm facing the same problems with userEvent v14.

[danny-does-stuff]

@christocarr sorry, I don’t remember what exactly I was working on when I made this issue. I was satisfied with the responses here, though. Are you able to duplicate it with the codesandbox I shared above with the upgraded version?

[christocarr]

Had a look at your codesandbox implementation and it seems all your tests pass but you have commented that a test fails in the sandbox. I have something similar but it seems that userEvent.keyboard and useEvent.tab does not navigate to the sibling button. Focus remains on one button.

[danny-does-stuff]

@christocarr what versions of the relevant packages are you using? can you modify my code sandbox to duplicate your issue?

[christocarr]

@danny-does-stuff all my packages are up to date. I have other react-modal tests which are passing. I've updated your codesandbox to a very similar approach I'm using for a company project where the test fails but passes on the codesandbox which is very strange.

[christocarr]

@danny-does-stuff all my packages are up to date. I have other react-modal tests which are passing. I've updated your codesandbox to a very similar approach I'm using for a company project where the test fails but passes on the codesandbox which is very strange.

[phyrwork]

Hi, I work with @christocarr

We've duplicated your sandbox and observe that the tabbing inside modal test breaks when updating react-modal from 3.15.1 to 3.16.1.

Problem still not resolved when also updating user-event to 14.5.1.

[Ninita1]

@danny-does-stuff did you find any solution?

[danny-does-stuff]

@Ninita1 and other future devs, I was able to fix my issue by simply updating @testing-library/react to version 14 or later. It was not working in older versions, but worked after upgrading