Polaris App Bridge React Modal - setupModalAutoSizing

HunkyBill
Shopify Expert
4374 36 468

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
0 Likes
iain-campbell
Shopify Staff
Shopify Staff
54 9 20

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.

iain-campbell | Developer @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
HunkyBill
Shopify Expert
4374 36 468

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
0 Likes
iain-campbell
Shopify Staff
Shopify Staff
54 9 20

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

iain-campbell | Developer @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
HunkyBill
Shopify Expert
4374 36 468

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
0 Likes
iain-campbell
Shopify Staff
Shopify Staff
54 9 20

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!!

iain-campbell | Developer @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

0 Likes
HunkyBill
Shopify Expert
4374 36 468

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
0 Likes