Polaris-react: Modal in an embedded app missing required src property

[janklimo]

Issue summary

In my embedded Shopify app (single page React app) I want to render a modal to collect user input. However, this is what I see in the console.

These required properties are missing from Modal: src

I don't want to render anything from a remote source, just one input and confirm/cancel buttons.

Expected behavior

Sounds like a simple use case. I'd expect I can render children inside my modal and process the input.

Steps to reproduce the problem

1. Embedded app
2. Basic modal source code from here

Specifications

• Polaris version: 2.0.0
• React version: 16.3.2
• Browser: Chrome
• Device: MacBook Air
• Operating System: OS X El Capitan

[chloerice]

Hi @janklimo, for security reasons embedded modals can only be rendered with content provided via the required src prop. See https://github.com/Shopify/polaris/issues/304 for an example.

[janklimo]

@chloerice thank you for a fast response. So am I right to conclude that in order to render a modal inside of my embedded app, I'll need to use a 3d party library? I'm considering this one.

[chloerice]

Using the embedded modal will render the modal for the whole page (the entire admin, not just within the iframe rendering your embedded app). If you want a modal that only renders in the iframe wrapping your app, you can use the new modal component that was released in v2.0.0.

[janklimo]

Hi @chloerice that's what I'm trying to do. E.g.

import { Modal } from '@shopify/polaris'

but still seeing that src is required. Looking at this code:
https://github.com/Shopify/polaris/blob/218f553ad3b537d11bc3ac7e9137ff8d06e92bb5/src/components/Modal/Modal.tsx#L260

wouldn't that happen every time the new modal component is rendered from within an embedded app?

[atulmith]

Hi,
Same problem here my FormLayout won't render inside the modal and the same error in console.
index.es.js:6707 These required properties are missing from Modal: src

[chloerice]

My apologies folks, I was under the wrong impression that the modal released in v2 would render within the embedded app iframe. The src prop is required for embedded apps to render modals with either the embedded modal component or modal component.

[atulmith]

Hi,
Do you have any plan to get it working without src in future.
Sorry to know it wont work my client's needed this feature.

[janklimo]

@chloerice I'm with @atulmith on this one. Using modals rendered within an iframe of the embedded app is a must-have feature.

If it's not enabled by Polaris, people will just use 3rd party libraries and the experience will be inconsistent - which is the whole point of a design framework.

Given that there is no security concern when showing modals within the iframe wrapping my embedded app I don't see a reason to require a remote source. Please correct me if I'm missing some context, thanks!

[lemonmade]

There are a few problems with showing a modal in the iframe. Since there is no connection between the app and the admin, you can easily get into situations of popovers/ modals in the admin overlapping your app’s modal in a confusing way. Modals in Shopify also have an overlay over the entire app, which is impossible if the app is rendered in the iframe. In a similar vein, the app can’t center the modal in the same spot as one in the main admin, as the position of the modal occasionally overlaps the sidebar area.

[slyapustin]

@chloerice That is really strange we can't use Modal for exact same reason we use it before.
What is the right way to ask user confirmation with Modal (or something similar) within Polaris 2.0?

[chloerice]

Hi @inoks, the way embedded apps interact with the admin to render modals is the same in v2.0.0 as it was before. Make a view in your app for the content you want to render in the modal, and provide the route for the view as the value of the modal component's src prop. See https://github.com/Shopify/polaris/issues/304 for an example.

[slyapustin]

@chloerice This is NOT the same.
I want to collect extra data after user click on the button on my page.
So for example user click Send email button and i was able to collect email in the Modal element.
And now it became way to complex, so we need to create own Modal component, which will works for our needs.

[pbarrios]

So does the Modal.Section make sense or not? As far as I understand it's only possible set the content of the modal from an external resource, which complicates pretty much a very common scenario. If this will keep like this please consider to update the current modal documentation. Thanks!