Many Polaris components cannot work in the new Modal

[dungfv]

I noticed that many Polaris components cannot work in the new modal:

• Popover
• Tooltip
• Drop zone

Additionally, drag & drop behaviors are also blocked in the new app bridge Modal. This breaks my current application.

Originally posted by @dungfv in https://github.com/Shopify/shopify-app-bridge/issues/238#issuecomment-1980064764

[darrynten]

You can see some of the issues caused by the modal document context we ran into here: https://github.com/Shopify/shopify-app-bridge/issues/269

Maybe the iframe based solution will work for you

[dungfv]

You can see some of the issues caused by the modal document context we ran into here: #269

Maybe the iframe based solution will work for you

Thank @darrynten. This works for me. However, it makes many secondary resource calls and delays when loading the modal. The actions in the modal also don't work directly, I have to use broadcast to communicate with the iframe. I think we still need a better fixing from the library itself.

[charlesdobson]

Hi @dungfv,

We're looking into this. Thanks for reporting!

[charlesdobson]

Hi @dungfv,

We've added in support for a src prop to the modal to render the provided URL in an iframe. Docs are here. If using this, you can use the postMessage API for modal to main app communication - docs are here.

Please let me know if that works for you!

[mirceapiturca]

@charlesdobson does this mean that to use Polaris components like Popover or Tooltip in a modal we need to create a new route and postMessage back and forward cross iframes? In React?

[dungfv]

@charlesdobson thank you for updating. I just tested with new updates, fetching in the Modal context is unauthorized. Until now, the solution of @darrynten is still better.

In my opinion, the new Modal behavior isn't friendly for both developers and end users.