Checkout UI extension ui.overlay.close() not working

Shopify Apps
1

We run into a problem using the Modal component. We have a button at the Payment step that opens a Modal with a form. When the form is submitted, we want to close the modal. We tried using the ui.overlay.close() method and it is also the only way (I believe), but it doesn’t work. The modal remains open.
The weird thing is that if we refresh the page while at the Payment step, it will work as expected. If we refresh the page at other steps, it will not work. Please take a look at the code below:

import {
  Button,
  Modal,
  reactExtension,
  useApi,
  useBuyerJourneyActiveStep,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension("purchase.checkout.block.render", () => (
  

Here is the dependencies version:

“dependencies”: {
“@shopify/ui-extensions”: “2024.4.1”,
“@shopify/ui-extensions-react”: “2024.4.1”,
}


We also tried with the latest version:

“dependencies”: {
“@shopify/ui-extensions”: “2025.1.x”,
“@shopify/ui-extensions-react”: “2025.1.x”,
}


![Screenshot 2025-02-06 at 15.31.37.png|1580x899](upload://gDmNi4frGO3w49II9mqIYSVKFDL.png)
2

Dose anyone have any idea?

3

Please help!

4

I am facing the exact same issue! Works on page refresh but doesn’t work if you navigate to the page

5

Please help us!

6

I struggled finding an answer to this!

With the new <s-modal> webcomponent, there’s some methods available that aren’t made clear in the Polaris documentation. They recommend storing a ref to the modal so you can access the webcomponent’s methods.

const modalRef = useRef(null);
modalRef.current.hideOverlay();