Question

当有一个mat-select内部mat-sidenav要以编程方式打开时，mat-select会聚焦并且（如果内容允许），sidenav会滚动到聚焦元素。

如何防止焦点和滚动？目前我正在使用一个丑陋的黑客，在mat-sidenav上添加额外的mat-select并将height设置为0并溢出到隐藏，但我想知道是否有更合适和优雅的解决方案。< / p>

问题的最低限度演示：https://angular-bg7azm.stackblitz.io

演示正在使用：

@ angular / core @ 5.2.0
@ angular / material @ 5.0.0-rc.3

我正在使用：

@ angular / code @ 4.3.0
@ angular / material @ 2.0.0-beta.12

Answer 1

我一直在努力为基本相同的问题找到一个很好的解决方案 - 没有任何项目最初关注对话而不使用tabindex =“ - 1”。我提出的一个解决方案与你的“黑客”想法基本相同，但更聪明一些。这是一个非常简单的自定义组件，它使用CDK指令来获取初始焦点，然后在模糊时自行移除。组件的不透明度和大小为零，因此它是不可见的，不占用空间。除了此组件具有初始焦点之外，还保留了Tab顺序。您可以通过将自定义组件放在DOM中，然后在要有效的Tab键顺序的第一个元素之前，控制哪个项目关注第一个TAB印刷机。因为组件在模糊时通过ngIf被删除，所以一旦用户与某些内容交互，它就不再处于Tab键顺序中。

注意：'cdkFocusInitial'指令来自Material 5.x.在2.0.0-beta.12中，它是'cdk-focus-initial'。另外 - 我只用5.x进行了测试。

组件代码：

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() { }
}

部分HTML示例（来自您的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>

我不确定这在多种用例中有多强大，并且可能有一些方法可以对此进行改进，但它似乎在对话框和侧边框中都能很好地工作。

mat-select inside-sidenav在sidenav打开时自动聚焦

1 个答案: