Contextual save bar not working with browser back button

Shopify Apps
, ,
1

The ui-save-bar correctly prevents the user from leaving the page with unsaved changes when navigating via in-app links (React Router), but it does not intercept the browser back button when the page was navigated to via React Router.

Interestingly, it works correctly if the page is loaded directly via URL (not through client-side navigation). If the page was navigated to via a React Router link from another page in the app, when the user clicks the browser back button with the save bar showing, they are navigated back to the previous page, and the save bar remains at the top.

I’ve tried listening to the beforeunload and popstate events in an attempt to block navigation, but these don’t seem to work in the iframe context.

Is there a way to intercept browser back button navigation while the save bar is showing?

2

@doabledanny It looks like the problem happens because the iframe and React Router handle back navigation differently. You can try using React Router’s useNavigate or useHistory to detect when the user goes back and show a warning. beforeunload won’t work inside an iframe.