如何在点击时使用 Chiplist 自动展开/折叠 Angular Material Autocomplete

Question

我有一个应用程序，其中预先填充了自动完成中的项目列表，一旦选择，这些项目就会显示为“筹码”。用户可以选择、添加和删除。问题是许多用户希望在输入字段上单击鼠标时自动完成列表会展开......但这只有在输入字段获得焦点时才会发生（而不是在焦点已经设置并且列表折叠的情况下） ）。

问题是一半的用户希望“鼠标单击”输入控件并期望自动完成功能展开（或切换展开/折叠）。问题是，一旦选择了一个项目，就会创建“芯片”，并且光标留在自动完成的“输入”控件上，其列表已折叠。当用户再次直观地“鼠标单击”“输入”控件以选择另一个项目时，自动完成不会展开......他们需要在其他地方“单击”（失去焦点）然后再次单击“输入” " 字段以查看列表。

这会让一些不使用关键字（不使用自动完成搜索功能）的最终用户感到困惑，他们希望鼠标单击输入控件会像第一次那样再次展开（他们不会' t 直观地实现了第一次扩展，因为“输入”字段获得了焦点）。

使用键盘的用户没有问题，因为他们可能知道列表中的内容，并且在键入时它会自动展开（或折叠）。

https://stackblitz.com/angular/eknbvbpdqyo?file=app%2Fchips-autocomplete-example.ts

<mat-form-field class="example-chip-list">
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip
      *ngFor="let fruit of fruits"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove(fruit)">
      {{fruit}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input
      placeholder="New fruit..."
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{fruit}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component, ElementRef, ViewChild} from '@angular/core';
import {FormControl} from '@angular/forms';
import {MatAutocompleteSelectedEvent, MatAutocomplete} from '@angular/material/autocomplete';
import {MatChipInputEvent} from '@angular/material/chips';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';

/**
 * @title Chips Autocomplete
 */
@Component({
  selector: 'chips-autocomplete-example',
  templateUrl: 'chips-autocomplete-example.html',
  styleUrls: ['chips-autocomplete-example.css'],
})
export class ChipsAutocompleteExample {
  visible = true;
  selectable = true;
  removable = true;
  addOnBlur = true;
  separatorKeysCodes: number[] = [ENTER, COMMA];
  fruitCtrl = new FormControl();
  filteredFruits: Observable<string[]>;
  fruits: string[] = ['Lemon'];
  allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];

  @ViewChild('fruitInput', {static: false}) fruitInput: ElementRef<HTMLInputElement>;
  @ViewChild('auto', {static: false}) matAutocomplete: MatAutocomplete;

  constructor() {
    this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
        startWith(null),
        map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
  }

  add(event: MatChipInputEvent): void {
    // Add fruit only when MatAutocomplete is not open
    // To make sure this does not conflict with OptionSelected Event
    if (!this.matAutocomplete.isOpen) {
      const input = event.input;
      const value = event.value;

      // Add our fruit
      if ((value || '').trim()) {
        this.fruits.push(value.trim());
      }

      // Reset the input value
      if (input) {
        input.value = '';
      }

      this.fruitCtrl.setValue(null);
    }
  }

  remove(fruit: string): void {
    const index = this.fruits.indexOf(fruit);

    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }

  selected(event: MatAutocompleteSelectedEvent): void {
    this.fruits.push(event.option.viewValue);
    this.fruitInput.nativeElement.value = '';
    this.fruitCtrl.setValue(null);
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.allFruits.filter(fruit => fruit.toLowerCase().indexOf(filterValue) === 0);
  }
}

无论控件是否已经获得焦点，“切换”（展开/折叠）或始终展开自动完成列表的最佳方式是什么？

（我尝试将焦点设置在选择的最后一个芯片上，但这会影响用户使用键盘，因此它不是真正的解决方案。

Answer 1

一种解决方案是手动重新关注点击，这将导致下拉菜单重新打开。感觉很奇怪，但实现起来很简单。只需添加如下函数：

focusFruitInput(){
  this.fruitInput.nativeElement.blur();
  this.fruitInput.nativeElement.focus();
}

然后您可以将此焦点函数绑定到输入上的单击事件：

<input placeholder="New fruit..."
       #fruitInput
       (click)="focusFruitInput()"
       //...
>

现在，无论您是否已经关注输入，当您在激活状态下单击输入时，它都会打开自动完成下拉菜单。