Issues with Shopify App Bridge Modal – Z-Index and Splide AutoScroll

[binay]

Dear Shopify Support Team,

I hope this message finds you well.

I’m currently experiencing a couple of issues related to the Shopify App Bridge Modal component, and I would greatly appreciate your assistance:

1. Dropdown Visibility Issue:
   When using a select element inside the App Bridge Modal, the dropdown options appear behind the modal rather than in the foreground, making them difficult or impossible to interact with.
2. Splide AutoScroll Compatibility:
   I’ve implemented the Splide slider with the AutoScroll extension, which functions correctly within a Polaris Modal. However, when used inside the App Bridge Modal, the auto-scrolling feature does not activate as expected.

To help illustrate the issues, I’ve attached both a short video and an image demonstrating the behavior.

Additionally, I would be grateful if you could clarify whether using deprecated components from @shopify/polaris-react might contribute to such issues, particularly when used alongside App Bridge modals.

Thank you very much for your time and support. I look forward to any recommendations or solutions you might be able to provide.

[remy727]

To fix the issue related to the select element, you must wrap your modal’s child components in a Polaris App Provider.
More details - React components using React Portals