mat-select inside-sidenav在sidenav打开时自动聚焦-Java 学习之路

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

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

该问题的最低限度演示：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

1 回答

0
我一直在努力为基本相同的问题找到一个很好的解决方案 - 没有任何项目最初关注对话而不使用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>
```
我不确定这在多种用例中是多么强大，并且可能有一些方法可以改进这一点，但它似乎在对话框和sidenav中运行良好 .
回复于 2024-05-05T10:37:09+08:00

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

1 回答

相关问题