[Bug] Paypal Modals hidden behind <dialog> modals

[wesbos]

Library used

Using the React library, but this exists with all implementations.

🐞 Describe the Bug

Using a PayPal button to pay, when clicking to open the popup window, paypal shows a modal that essentially disables the website while the work in being done in the popup:

This modal is injected into the body and has a z-index of 2147483647 but that does not go higher than CSS top-layer, on things like a <dialog> element shown with .showModal().

In my case - I have a checkout using a <dialog> element, and the paypal UI renders underneath it.

Stripe is also suffering from the same issue

The fix is to move Paypal modal to a native element and if available (currently 100% browser support), use .showModal() to open it. Older browsers can still be polyfilled or just shown with CSS as your already are.

[dkoenigroer]

Sorry, just deleted my comment and opened another issue. I think its another problem.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[wesbos]

Not stale. Still very much an issue

[L-Blondy]

Having the same issue