Max model issue in app bridge version4

Max model issue in app bridge version4

sandhya2
Shopify Partner
2 0 1

Max modal includes a `close` button by default and the ability to customize the title, and primary and secondary actions by using the existing Title Bar API. but I want to prevent the default behavior of the max model close functionality. I want to control close functionality in the max model.
this is my code .  for some specific condition i want to close the model other wise not . 
import React, { useEffect, useState } from "react";
import { Modal , useAppBridge , TitleBar } from "@shopify/app-bridge-react";const Test = () => {const shopify = useAppBridge();function handlePrimaryAction() {
shopify.modal.hide('social-media-modal');
}return (
<>
<button onClick={() => shopify.modal.show('social-media-modal')}>
Expand Your Reach
</button>
<Modal id="social-media-modal" variant="max">
<p style={{padding: '1rem'}}>
Expand your reach and attract more customers by enabling easy social
media sharing of your products.
</p>
<TitleBar title="Drive traffic with social media sharing">
<button variant="primary" onClick={handlePrimaryAction}>
Enable Social Sharing
</button>
</TitleBar>
</Modal>
</>
);
};export default Test; (edited) 

Reply 1 (1)

LordTejas
Shopify Partner
1 0 0

I am having the same issue and we want to apply for BFS and this is the 1 issue that's stopping us from getting BFS Badge. Please Someone @Shopify take a not of this issue because it's stopping us from implementing the show Save Modal functionality before leaving the page!

We need a onClose function that can overwrite the default behaviour instead or else remove the need of showing save bar before exiting max modal! 
These gaps are causing troubles for most of developers using polaris and app bridge, after recent update