Prevent modal close on click of cross icon, esc button or click somewhere outside of modal, if any unsaved changes in the modal form

App Bridge
1

Hi all, I’m looking for a solution to prevent default behaviour of modal close

In a Shopify App Bridge modal, is there a way to prevent the default close behavior when clicking the backdrop or the close (×) icon?
I’ve checked the Shopify documentation but couldn’t find any props or methods to stop this behavior.
My use case is that the modal contains a form with unsaved changes, and I want to ensure the user explicitly interacts with Save or Discard buttons before closing. However, right now the modal closes immediately when the backdrop or close icon is clicked, which skips this flow.
Is it possible to prevent the modal from closing automatically on backdrop/close icon clicks?

2

Hi there!

Thanks for reaching out about preventing the default close behavior in App Bridge modals. I’m looking into this now to see what options are available.

To help me reproduce and better understand your specific case, could you provide a few more details:

Implementation Details:

  • Which version of App Bridge are you using?
    • CDN version: with web components (current recommended approach)
    • npm version: @shopify/app-bridge or @shopify/app-bridge-react packages with React component (maintenance mode)
  • If using npm packages, what specific version numbers are you on?
  • Could you share a minimal code example of your current modal implementation?

Documentation References:

3

Hi, i m using latest @shopify/app-bridge-react version 4.2.3

I have a MyModal component in React APP

Screenshot 2025-09-23 at 9.07.50 PM
Screenshot 2025-09-23 at 9.07.50 PM1658×1336 267 KB

4

Hi @Ankush_Katiyar you have to use the save-bar component inside modal to show an discard confirmation action.