The user is part way through completing a form or wizard and then the accidently click a link or trigger back on their browser… 😞 Their progress is lost and you have a frustrated user on you hands.
A common UX pattern to solve this issue is to implement a warning before you let the user navigate away from a partially completed page. As always, you should implement this pattern cautiosly. The more the user sees this type of prompt, the less likeley they’ll read it 🙃.
To implement this in ember we can use an action on the active route called willTransition. This is called before the route is about to transition away and transition.abort(); will stop the trasition.
The native browser confirm dialog isn’t the prettiest thing. To implement out own UI we can store the transition in the controller, show our own custom UI and then retry the transition at our users pleasure once they have confirmed.
First we stop the transition, store it on the controller and show a modal to the user
Out UI modal component has two actions; one to confirm the transition one to cancel it.
The modals actions are defined in our controller. On the confirm action, we call retry() on the transition to continue.
Developer, Designer, UX Zealot. Ember & Tailwind
