Drawer selected item is not changed on browser back and forward buttons

[Stefan]

Hi,

I have implemented a drawer with a router-outlet inside and when I click on the back or forward buttons in the browser the route changes but the selected item in the drawer stays the same.

Furthermore, I have seen that the same issue is presented in the example in the documentation.

https://www.telerik.com/kendo-angular-ui/components/layout/drawer/routing/

Regards

[Dimiter Madjarov]

Hello Stefan,

I tried to reproduce the problem in question in the documentation examples, but to no avail. Something that needs to be clarified is that the demos are loaded in separate iframes, so in order to test this behaviour in a relevant way, one needs to go back/forward in the iframe itself or open the example in a new page.

With that being said, in order to assist further with the current problem, please send us small runnable example (e.g. in Stackblitz) or modify one of the existing ones in the documentation, in order to demonstrate the issue. This will allow us to pinpoint the exact reason for the false behavior.

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Progress Telerik

[Stefan]

Hi Dimiter,

Here is a fork of the example you have on https://www.telerik.com/kendo-angular-ui/components/layout/drawer/routing/ :

https://stackblitz.com/edit/angular-g9bs87?file=app/app.component.ts

Moreover, here is an example of my code :

https://stackblitz.com/edit/angular-mfcgek?file=app%2Fapp.component.ts

Namely, if you go to about, then products then click on back button you will notice that the page changes but the menu selected item stays on the default one (Home)  which is selected on init.

If I do not select any item on init then none of them is selected.

Additionally, I have noticed that locally on my computer for the same example the behavior is different in a way that the browser does not refresh the page, however in that case the page and route change but the item selected stays to the last selected one.

Best Regards,

[Martin Bechev]

Hi Stefan,

Thank you for the provided additional details for this case.

Indeed the selected Drawer item depends on the selected property of the DrawerItem object. In order to highlight the respective item, the Drawer collection needs to be updated on each route change. Please keep in mind that any logic related to the routing is considered developer effort.

Here is the updated demo where the selected item is updated:

https://stackblitz.com/edit/angular-mfcgek-crwubn?file=app%2Fapp.component.ts

I hope this sheds some light on this case.

Regards,
Martin
Progress Telerik

[Stefan]

Hi Martin,

I have checked the example you have sent but the item is still not properly selected. As I can see the route does not have the url and sets it to home again.

Regards,

Stefan

[Martin Bechev]

Hi Stefan,

Thank you for the provided screenshot.

The reported behavior is caused as the app base href is set to window.location.pathname in app.module file:

 providers: [
      {
        provide: APP_BASE_HREF,
        useValue: window.location.pathname
      }
    ]

Omit these lines of code in order to go to the desired route when changing the url manually:

https://stackblitz.com/edit/angular-mfcgek-nwetws

Regards,
Martin

[Adam]

In case this is helpful for anyone else - setting the items property to a new array (i.e. this.items = [...this.items]) to trigger change detection is key here.  If you just update the selected value within the array, it will not re-render.

[huib]

saved my day.. should this go into the docs?