Navigation triggered in Modal's onHide conflicts with a subsequent modal on the next page in the Shopify iOS app.

[kestutisbalt]

Describe the bug

The onHide callback of Modal A triggers a React Router navigation to another page where Modal B is opened. This causes conflicts on the Shopify iOS app — Modal A does not close, and Modal B briefly appears before disappearing.

To Reproduce

import { Modal, TitleBar } from '@shopify/app-bridge-react';
import { Button, Page } from '@shopify/polaris';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

export function TmpPage() {
    const [showModal, setShowModal] = useState(false);

    const navigate = useNavigate();

    return (
        <Page title="Tmp">
            <Button onClick={() => setShowModal(true)}>Show modal</Button>
            <Modal
                id="modal-1"
                open={showModal}
                onHide={() => {
                    navigate('/tmp2');
                }}
            >
                <p>Modal</p>
                <TitleBar title={'Modal'}>
                    <button
                        variant="primary"
                        onClick={() => {
                            setShowModal(false);
                        }}
                    >
                        Hide and Show Modal 2
                    </button>
                </TitleBar>
            </Modal>
        </Page>
    );
}

export function TmpPage2() {
    const [showModal, setShowModal] = useState(false);

    useEffect(() => {
        setTimeout(() => {
            setShowModal(true);
        }, 200);
    }, []);

    return (
        <Page title="Tmp2">
            <Modal id="modal-2" open={showModal}>
                <p>Modal 2</p>
                <TitleBar title={'Modal 2'}>
                    <button
                        variant="primary"
                        onClick={() => {
                            setShowModal(false);
                        }}
                    >
                        Hide
                    </button>
                </TitleBar>
            </Modal>
        </Page>
    );
}

Expected behaviour

I expect onHide to be called only when it is safe to navigate without causing conflicts with a modal on the next page.

Contextual information

This issue occurs only on the Shopify iOS app (version 9.2512.0).

Packages and versions

• react-router-dom @ 7.3.0
• @shopify/app-bridge-react @ 4.1.7
• @shopify/polaris @ 13.9.4

Platform

• OS: iOS
• OS Version: 16.7.10
• App: Shopify Mobile (Version: 9.2512.0)