Display modal on back button click
Hey all,
I've received a task wherein we're displaying a modal on an order form when the user takes certain actions that will trigger a modal offering a discount or some other product depending on a vendor's settings. One of the requests is to trigger the modal when the user clicks the back button. Essentially, the user clicks back, the modal pops up saying "before you go, here's the offer", and then never triggers again.
As annoying as it is, I figure I should look into how this could be done. My idea was to
pushState under certain circumstances a dummy entry, so that when the user clicks back to leave the SPA, there's that buffer for us to detect popstate, show the modal, and then flip a boolean that will fix things up to allow back navigation afterward. However, it seems browsers have begun trying to skip duplicate entries when back is clicked, seeing discussions such as https://github.com/WICG/interventions/issues/21 and https://github.com/whatwg/html/issues/7832. I've thought about potentially doing some kind of client-side routing (we use React Router), and a <Prompt /> that'll get me there, but that seems like a bad idea both because it's hacky and because I don't believe navigation blocking are available in the same way in the newest version of RR.
It's difficult for me to determine if there is left a way to implement this reliably, or if it's effectively (and probably rightfully) not possible. I figure even if I could, it's liable to break as browser versions are released and the discussions continue. Is anyone aware of a way I could do this reliably, and in such way that it wouldn't be any more of a headache to the user than it has to be?0 Replies