aurelia / aurelia/framework

canDeactivate() only fired once when using navigation buttons (back/forward)

Open
#731 2 comments 12 reactions 0 assignees View on GitHub
bug help wanted
Dominant language
TypeScript
Stars
11.7k
Forks
608
PR merge metrics
No merged PRs in 30d

Description

**I'm submitting a bug report**

* **Library Version:**
1.1.0

**Please tell us about your environment:**
* **Operating System:**
Windows 10

* **Node Version:**
6.9.4

* **NPM Version:**
4.1.2

* **JSPM OR Webpack AND Version**
JSPM 0.16.52

* **Browser:**
Chrome 56.0.2924.87
Firefox 51.0.1 (32 bit)

* **Language:**
TypeScript 2.1.5

**Current behavior:**
- If canDeactivate() returns false it doesn't fire again when using the navigation buttons, back and forward.
- The navigation history in the browser changes, you can see the navigation buttons get disabled and enabled when you reach the edges of the history object, when using the navigation buttons, however the route inside the aurelia app doesn't change. If you came from a different site and navigate back enough times the browser will navigate to that site as it normally would.
- canDeactivate() does fire again if you reload the page, click a link, or enter a url in the browser.
- If choosing "ok" the navigation happens and the canDeactivate() fires again the next time you come back to the page and try to navigate again.

**Expected/desired behavior:**
canDeactivate() should fire every time you try to navigate away from a page. In this example the confirm popup should show every time I hit back or forward.

1. Add the following to a view model class:
`canDeactivate() {
return confirm('you wanna leave?'); // if you hit 'cancel' here, canDeactivate() won't fire again when using navigation buttons
}`
2. Navigate to the route
3. Try navigating away from it using any method
4. Select "cancel" in the confirm popup
5. Try to navigate again using back or forward in the browser or on the mouse
6. canDeactivate() is now skipped. Aurelia navigation is disabled but browser navigation occurs.

Can't reproduce in gist because it involves navigation using back and forward.

* **What is the motivation / use case for changing the behavior?**
I make a check for unsaved data in a form and prompt the users if they really want to leave if there are any. If they hit "cancel" they should be prompted again if they try to navigate away again until they either save the data or click "ok" in the prompt.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue from the view model canDeactivate() entry point, using browser back and forward after selecting cancel in the confirm dialog. Done means canDeactivate() runs on every attempted back or forward navigation, while the route remains unchanged when navigation is canceled.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.