search

stripe / react-stripe-js

React components for Stripe.js and Stripe Elements
https://stripe.com/docs/stripe-js/react
MIT License
1.78k stars 272 forks source link

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

Closed Neo42 closed 2 years ago

Neo42 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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: https://github.com/stripe/react-stripe-js/issues/303

Neo42 commented 2 years ago

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 commented 1 year ago

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 commented 8 months ago

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