Focus trap in Dialogs is not working for React ^17.x

[ivangonzalezsp]

Current behaviour

In a dialog when I use tab in my keyboard to move between the buttons inside the dialog it ends going to browser url and the buttons behind the dialog.

Expected behaviour

the focus is keep inside the dialog like in React 16

CodeSandbox or Storybook URL

https://codesandbox.io/s/optimistic-darkness-ek312?file=/src/index.js

JIRA Ticket (Sage Only)

XT-4739

Suggested Solution

No response

Carbon Version

102.9.0

What browsers are you seeing the problem on?

Chrome

What Operating System are you seeing the problem on?

MacOS

Anything else we should know?

No response

Confidentiality

• [X] I confirm there is no confidential or commercially sensitive information included.

[DipperTheDan]

FE-4752

[DipperTheDan]

Hi @ivangonzalezsp We currently have a ticket open on our backlog to upgrade to React 17. We'll get this tested along side the upgrade to make sure this bug is resolved for you 😄

[nicktitchmarsh]

Our upgrade to React 17 is currently blocked by an open issue on Enzyme. We are currently looking to migrate away from Enzyme.

[blaky]

Hi there,

Any update on this issue? We just came across a blocking issue related to the version mismatch between 17 and 16.

Thanks

[shavonne-sage]

@DipperTheDan @nicktitchmarsh, what's the status of this issue? Thank you!

[mkrds]

@ivangonzalezsp @shavonne-sage It looks like this issue does not exist anymore after updating the carbon-react package to the newest version https://codesandbox.io/s/winter-cdn-8l18bl?file=/src/index.js

[shavonne-sage]

Thank you for letting us know, @mkrds .

[DlgSHi]

As @mkrds replied - the issue no more occurs, could you @shavonne-sage confirm that, thank you in advance?

[nevillegallimore]

Hi @DlgSHi, Hi @mkrds,

Sorry for the long delay in getting back to you on this topic. I am currently looking into the issue on our side. I can confirm, that the dialog now works as expected. However, we still have a similar issue with the Sidebar component:

When we use the sidebar (even with the enableBackgroundUI prop set to false), the React extension claims to have a focus trap. However, via keyboard I can still Alt + Tab to the background content.

Can this issue be fixed in a similar fashion to the dialog focus? Should I open a new issue with you guys?

FYI: @shavonne-sage, @blaky, @ivangonzalezsp

Kind regards, Neville

[edleeks87]

Closing as the issue is stale (should have been closed a while a go), we have upgraded to react 17 and focus trap works as expected

https://codesandbox.io/s/exciting-rumple-9lh7wt