I’ve been tasked with implementing a flow where pressing a button on a Modal triggers an HTTP request to our API. We want to prevent the modal from being dismissed while that request is in progress so that we can show content/feedback based on the response, but it seems like either pressing Esc, pressing the x close icon in the top corner of the modal, or pressing outside the modal on the backdrop force the modal to close anyway. Is there any way to prevent this behaviour? Thanks!
Hey,
that’s currently not possible.
As a workaround, you could implement the logic that manages the request state outside of the component that renders the Modal and then show error or success state outside of the Modal if it has been closed in between.
You’d use the onCall callback to determine if the Modal was closed.
Thanks for the confirmation @Robin-Shopify. It’s a bit disappointing to not have that level of control over the modal. Usually it might not matter so much but we have a flow in a full-page customer account UI extension that is dependent on presenting more than just a simple success message to the user upon completion of the async operation. That content is most effective if kept “front and centre”, otherwise it could be easily lost amongst the rest of the page’s content (especially if the user scrolls between closing the modal and the operation completing).
Is there anything on the roadmap to increase the level of control developers have when it comes to controlling the opening/closing (or preventing thereof) for modals? Thanks!