Out now! Check out the Poll results: Do you have a Shopify store?
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Polaris App Bridge React Modal - setupModalAutoSizing

Polaris App Bridge React Modal - setupModalAutoSizing

HunkyBill
Shopify Partner
4853 60 568

If I fire up a modal and provide an image as the content, the setupModalAutoSizing fails to account for the size of the image, and the modal is not sized to the image. I can see the image src in the rendered DOM elements, but the modal is blank. If I call the component again, it renders perfect! So clearly this utility is capable. It is not capable on first use though.

So my question is, what is one supposed to do to use the Modal Auto Size when the Modal contains image content? My only workaround so far is to assign a fixed height to the wrapper of the modal which indeed pops open a modal of that height. I examined the source code of the utility function but I failed to see a Eureka fix for images.

Any help on that most appreciated.

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
Replies 6 (6)

iain-campbell
Shopify Staff (Retired)
54 9 23

Hmm, interesting. Do you mean if you call setupModalAutoSizing again after the image has loaded, it works? The setupModalAutoSizing utility just wraps the MutationObserver API, which sounds like it may not be picking up image load events.

To learn more visit the Shopify Help Center or the Community Blog.

HunkyBill
Shopify Partner
4853 60 568

Yes. In my code I have a resource item with a thumbnail, and a click on the thumb provides the modal with the src to the fullsize image. So the modal renders, but on first click the image is always blank, nothing shows, but on any further clicks, the autoSizeModal actually works and shows the image at its correct size without me setting any CSS.

But if I set CSS to explicitly size the container, the modal shows it, at that size. Would be swell if this worked with images and without me setting a fixed size!

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
iain-campbell
Shopify Staff (Retired)
54 9 23

Gotcha. As a workaround, you could call setupModalAutoSizing in a handler for the image’s onload event. However, you shouldn't have to do that; this is a bug in setupModalAutoSizing.  Would you mind opening a bug report on the new App Bridge github board? https://github.com/Shopify/shopify-app-bridge/issues

To learn more visit the Shopify Help Center or the Community Blog.

HunkyBill
Shopify Partner
4853 60 568

I had setup one some time ago (ignored) at Polaris, but I will re-do one specific to App Bridge sure! Thanks

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com
iain-campbell
Shopify Staff (Retired)
54 9 23

Yeah, we recently created the new issue repo specifically for App Bridge because there were a bunch of tickets getting lost in the Polaris repo. sorry about that!!

To learn more visit the Shopify Help Center or the Community Blog.

HunkyBill
Shopify Partner
4853 60 568

This is still a bug well in Polaris 5 and App Bridge React 1.21.2

Custom Shopify Apps built just for you! hunkybill@gmail.com http://www.resistorsoftware.com