mat-select inside mat-sidenav auto-focused when sidenav is opened - angular-material2

Question

When having a mat-select inside mat-sidenav which is to be programmatically opened, the mat-select gets focused and (if content allows for it), the sidenav is scrolled to focused element.
How to prevent the focus and scroll? At the moment I'm using an ugly hack by adding additional mat-select on top of the mat-sidenav and setting height to 0 and overflow to hidden, but I'm wondering if there's a more proper and elegant solution to this.
A bare minimum demo of the issue: https://angular-bg7azm.stackblitz.io
Demo is using:
#angular/core # 5.2.0
#angular/material # 5.0.0-rc.3
I am using:
#angular/code # 4.3.0
#angular/material # 2.0.0-beta.12

Answer 1

I've been trying to find a good solution for essentially the same problem - not having any item initially focused on a dialog without using tabindex="-1". One solution I came up with is basically the same as your 'hack' idea but a little smarter. It's a very simple custom component that uses a CDK directive to grab initial focus, then removes itself on blur. The component's opacity and size is zero so it is invisible and takes up no space. Tab order is preserved other than that this component has initial focus. You can control which item has focus on the first TAB press by placing the custom component in your DOM before the element you want to be first in the effective tab order. Because the component is removed on blur via ngIf, it is no longer in the tab order once the user has interacted with something.
NOTE: The 'cdkFocusInitial' directive is from Material 5.x. In 2.0.0-beta.12 it is 'cdk-focus-initial'. Also - I've only tested it with 5.x.
Component code:
import { Component } from '#angular/core';
#Component({
selector: 'init-focus',
template: '<button cdkFocusInitial *ngIf="!blurred" (blur)="blurred = true"></button>',
styles: [':host() { opacity: 0; max-width: 0; min-width: 0; max-height: 0; min-height: 0; margin: 0; padding: 0; border-width: 0; }']
})
export class InitFocus {
public blurred = false;
constructor() { }
}
Partial HTML example (from your stackblitz):
<mat-list-item>
<init-focus></init-focus>
<mat-form-field>
<mat-select placeholder="Status">
<mat-option value="open">Openstaand</mat-option>
<mat-option value="assigned">Toegekend</mat-option>
<mat-option value="in_progress">In behandeling</mat-option>
<mat-option value="closed_resolved">Opgelost</mat-option>
<mat-option value="closed_not_resolved">Niet opgelost</mat-option>
<mat-option value="not_relevant">Niet relevant</mat-option>
</mat-select>
</mat-form-field>
</mat-list-item>
I'm not sure how robust this is in varied use cases, and there might be ways to improve on this, but it seems to work well on dialogs and in a sidenav.