Components: Sidenav scrolls back to top after open if push or aside

[olingerc]

Bug, feature request, or proposal:

If a sidenav has sufficient content to make it scrollable, it does not keep previous scroll position when reopened. In fact the scroll position jumps back to the top but only after the animation has finished. This only happens on modes "over" and "push", not so if "side".

What is the expected behavior?

The scroll position stays the same if the sidenav is reopened

What is the current behavior?

The scroll position always jumps to the top in modes over and push

What are the steps to reproduce?

Using the stackblitz form the api docs here and filling the sidenav with content until scrolling happens makes the issue visible. Use ESCAPE to close the sidenav after scrolling. Then repoen to view issue.

What is the use-case or motivation for changing an existing behavior?

This is a bad user experience.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular Material v 5.0.3

[crisbeto]

I think what you're seeing is the sidenav focusing the first focusable element when it's opened (e.g. if you have a button at the top of the sidenav), which causes the browser to scroll it into view.

[olingerc]

@crisbeto I think you are correct. However, the whole sidenav contains lots of link tags, so there will always be focusable elements. Do you know how I can turn off the auto focusing? It is not really clear from the documentation.

[crisbeto]

It's not possible to turn it off at the moment, because it's an accessibility feature that ensures that focus for keyboard users isn't lost when they open a sidenav. cc @mmalerba

[olingerc]

After some thought, I actually agree with this. I read about the cdk-focus-start attribute and this actually gives some customisation but I had to find out about it in the docs.
Another issue is, that the focusing is done AFTER the panel has opened and the user will see the panel jump up. This does not look good at all.

[crakdelpol]

I have the same problem, on the documentation i see the attribute "md-disable-scroll-target" that have this description "Selector, pointing to an element, whose scrolling will be disabled when the sidenav is opened. By default this is the sidenav's direct parent."
But it doesn't seem to work.
The temporary solution for me (bad but work) is convert all elements in inputs (stylized look like div) and add property "md-autofocus" on interested input

[Keips]

*.ts
@Input() private menuSidenav: MatSidenav;
...
...{
this.menuSidenav.autoFocus = false;}

[tuanbs]

Works for me. Thanks @Keips

[Mds92]

<mat-sidenav #sidenav [mode]="'over'" class="files-sidenav" position="end" [autoFocus]="false">
</mat-sidenav>

[autoFocus]="false"

[ccjmne]

@crisbeto Hello,
I actually would like to auto-focus some specific element in my sidenav when it opens.

I switched on [autoFocus]="true" and dropped the cdkFocusInitial directive onto the component I need to be focused. It works just fine... unless the MatSidenav is in mode="side".
This seems to be directly linked to the issue discussed here, and you didn't seem to be at all surprised the side mode would behave differently.

Is there a reason why autofocus doesn't work in side mode — apart from the fact using mode="side" may express the intent to have the drawer be mostly left open — or is it actually an issue I should report?

Thanks!

[libvirtadept]

<mat-sidenav #sidenav [mode]="'over'" class="files-sidenav" position="end" [autoFocus]="false">
</mat-sidenav>

[autoFocus]="false"

Thank you. It is helped ^_^

[tommyc38]

Thank you @Mds92 and @Keips. I was seriously losing my mind trying to figure out what the heck was going on.

[jelbourn]

Closing since this is working as intended, and there is now a setting on the sidenav to control this behavior. I filed #19450 to track the fact that the sidenav docs don't explicitly mention cdkFocusInitial.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}