Angular5+Angular Material2模态框Autocomplete面板自动展开如何解决

我之前也碰到过这个坑——Angular Material的Autocomplete在模态框初始化时，会因为第一个输入框自动获取焦点，触发面板自动展开。试过autofocus没用很正常，因为模态框的焦点逻辑有点特殊，给你几个实测有效的解决方案：

方法1：模态框打开后手动关闭Autocomplete面板 #

这是最直接的方案，利用模态框的afterOpened事件，等模态框完全加载后手动关闭面板。

步骤： #

1. 先在模板里给你的MatAutocomplete加个模板引用变量：

<form name="indexation">
  <div class="row">
    <div class="col-md-12">
      <mat-form-field class="index-full-width">
        <input matInput type="text" [(ngModel)]="patientChoice" placeholder="Patient" aria-label="Patient"
               [matAutocomplete]="patientAuto">
        <!-- 给autocomplete加#patientAuto引用 -->
        <mat-autocomplete #patientAuto="matAutocomplete">
          <!-- 你的选项列表内容 -->
        </mat-autocomplete>
      </mat-form-field>
    </div>
  </div>
</form>

2. 在组件里获取这个Autocomplete实例，监听模态框打开事件：

import { Component, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatAutocomplete } from '@angular/material/autocomplete';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild('patientAuto') patientAuto: MatAutocomplete;
  patientChoice: string = '';

  constructor(private dialog: MatDialog) {}

  openModal() {
    const dialogRef = this.dialog.open(YourModalComponent);
    
    // 模态框打开完成后执行
    dialogRef.afterOpened().subscribe(() => {
      // 加个小延迟确保DOM初始化完成，避免找不到实例
      setTimeout(() => {
        if (this.patientAuto) {
          this.patientAuto.close();
        }
      }, 100);
    });
  }
}

方法2：让模态框焦点落在隐藏元素上 #

模态框默认会把焦点设置到第一个可聚焦元素，我们可以用一个隐藏的元素“抢走”焦点，避免输入框自动触发Autocomplete。

步骤： #

1. 在模态框的模板最顶部添加一个隐藏的可聚焦元素：

<!-- 隐藏的焦点捕获元素，放在表单前面 -->
<div #hiddenFocus tabindex="0" style="position: absolute; opacity: 0; height: 0; width: 0; overflow: hidden;"></div>

<form name="indexation">
  <!-- 你的原有表单内容 -->
</form>

2. 在模态框组件的ngAfterViewInit钩子中，把焦点设置到这个隐藏元素：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-modal',
  templateUrl: './your-modal.component.html'
})
export class YourModalComponent {
  @ViewChild('hiddenFocus') hiddenFocus: ElementRef;

  ngAfterViewInit() {
    // 把焦点转移到隐藏元素，避免输入框自动获焦
    this.hiddenFocus.nativeElement.focus();
  }
}

方法3：手动控制Autocomplete的展开时机 #

彻底改变触发逻辑，只有用户主动输入或点击输入框时才展开面板，初始加载时完全不触发。

步骤： #

1. 修改输入框的事件绑定，去掉默认的自动关联触发，改为手动调用展开：

<form name="indexation">
  <div class="row">
    <div class="col-md-12">
      <mat-form-field class="index-full-width">
        <input matInput type="text" [(ngModel)]="patientChoice" placeholder="Patient" aria-label="Patient"
               (input)="openAutoPanel()" (click)="openAutoPanel()">
        <mat-autocomplete #patientAuto="matAutocomplete">
          <!-- 选项内容 -->
        </mat-autocomplete>
      </mat-form-field>
    </div>
  </div>
</form>

2. 在组件里添加手动展开的方法：

import { Component, ViewChild } from '@angular/core';
import { MatAutocomplete } from '@angular/material/autocomplete';

@Component({
  selector: 'app-your-modal',
  templateUrl: './your-modal.component.html'
})
export class YourModalComponent {
  @ViewChild('patientAuto') patientAuto: MatAutocomplete;
  patientChoice: string = '';

  openAutoPanel() {
    if (this.patientAuto) {
      this.patientAuto.open();
    }
  }
}

这三个方法都能解决问题，你可以根据自己的项目情况选一个最顺手的。

内容的提问来源于stack exchange，提问作者anakin59490