[BUG]: Can't focus on 3d secure popup iframe input with mouse cursor

[Neo42]

What happened?

Can't focus on 3d secure popup iframe input with the mouse cursor. To see the issue, please go to this live app: https://fetchcambs.beezer.com/

After clicking the subscribe button at the bottom, entering the card info, and clicking on the "Pay Now" button, the 3d secure popup shows up, but I can't really focus on the input within and type in anything. Is this something we can control from outside the stripe react js library?

Environment

No response

Reproduction

No response

[tylersmith-stripe]

Hey @Neo42 👋 ,

Could you please provide a simplified reproduction, preferably one that is not behind a login wall? Would be happy to take a look. I just ran through a few test 3DS flows on my end, and was able to interact with the modals without issue.

[bmathews-stripe]

@Neo42 We've seen similar reports in the past where code from 3rd party component libraries like material UI have focus trapping behavior that steals focus from the 3DS popup.

If you're showing some kind of loading state via material UI, can you try disabling that and see if it resolves the issue? If it does, maybe there's an option within material UI to disable this focus trapping behavior.

Previous report: #303

[Neo42]

Thanks for your suggestions @tylersmith-stripe @bmathews-stripe. I wasn't able to do a reproduction for this one but managed to resolve it by adding disableAutoFocus, disableEnforceFocus & disableRestoreFocus props to the material UI dialog wrapping the payment element and hijacking the focus event. Thanks for your help again. Closing this one.

[ReMuSoMeGA93]

This is still an issue. Im using Chakra-UI. The Modal that opens for 3DS verification is created by Stripe or react-stripe, not by my UX library, so I can't give it any instructions to disable autofocus.

[AndruC]

This issue is caused by feature in Dialog components that are trapping the browser's focus. This is intended to be an accessibility feature, but this is a special case where we want another pop-up to take focus on top of any Dialogs.

This is still an issue. Im using Chakra-UI. The Modal that opens for 3DS verification is created by Stripe or react-stripe, not by my UX library, so I can't give it any instructions to disable autofocus.

Chakra-UI's Dialog component also traps focus[1]. To resolve this, set the trapFocus property on the Dialog component to false.

For anyone using Material-UI experiencing this issue, you'll need to use the disableEnforceFocus property [2] on any Dialog components that are open when Stripe opens the verification iframe.

You can find documentation for this focus trapping here.

[1] https://github.com/chakra-ui/chakra-ui/blob/bb3ce6671d4b857ebe79ce968c4acbc0b32cff42/packages/components/src/dialog/dialog-root.tsx#L62
[2] https://github.com/mui/material-ui/blob/bda562b435a70e3e8f6d7fb04581c6816a5ba0c7/packages/material-ui/src/Modal/Modal.js#L312