Polaris App Bridge React Modal - setupModalAutoSizing

[HunkyBill]

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.

[iain-campbell]

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.

[HunkyBill]

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!

[iain-campbell]

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

[HunkyBill]

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

[iain-campbell]

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

[HunkyBill]

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