2

Estou usando o Material Auto Complete Angular

Após selecionar uma opção da lista as mat-options somem, gostaria de que elas permanecessem até que clicasse fora do input. Segue gif mostrando o problema:

inserir a descrição da imagem aqui

Meu html:

<div class="col-xl-6 margemColunas">
    <label>Anunciaremos nas contas *</label>
     <input class="form-control inputContasB2W"
          #inputContasB2W
          [formControl]="contasB2WControl"
          [matAutocomplete]="auto"
          (matChipInputTokenEnd)="add($event)">
      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event, i)">
        <mat-option *ngFor="let contaB2W of contasFiltradas | async" [value]="contaB2W">
          {{contaB2W}}
        </mat-option>
      </mat-autocomplete>
</div>

<div class="col-xl-6 alinhaChips">
  <mat-chip-list>
    <mat-chip
    *ngFor="let contaB2W of produto.contasAnunciarB2W; let j = index"
    [selectable]="selected"
    [removable]="removable"
    (removed)="removeTag(i, j)">
    {{contaB2W}}
    <mat-icon matChipRemove><i class="fa fa-close"></i></mat-icon>
  </mat-chip>
  </mat-chip-list>
</div>

Meu TS:

constructor(){
    this.contasFiltradas = this.contasB2WControl.valueChanges.pipe(
      startWith(null),
      map((nomeConta: string | null) => nomeConta ? this._filter(nomeConta) : this.contasB2W.slice()));
}

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.contasB2W.filter(conta => conta.toLowerCase().indexOf(filterValue) === 0);
  }

selected(event: MatAutocompleteSelectedEvent, index: number): void {

 this.produtosConfirmadosAnuncio[index].contasAnunciarB2W.push(event.option.viewValue);

    this.inputContasB2W.nativeElement.value = '';

          } 
        }
5
  • E se usar um select no lugar de um input?
    – LeAndrade
    Commented 18/02/2019 às 13:37
  • @LeAndrade o material design angular mat-complete só tem suporte pra input. Se tentar colocar as entradas em um select ele retorna: "Can't bind to 'matAutocomplete' since it isn't a known property of 'select'." Eu vi que na documentação tem a propriedade "panelClosingActions" porém ainda não consegui encontrar ela no código deles. Commented 18/02/2019 às 13:49
  • Segundo a descrição da propriedade: "A stream of actions that should close the autocomplete panel, including when an option is selected, on blur, and when TAB is pressed." Commented 18/02/2019 às 13:52
  • Sim, não tem como digitar em um select, apenas escolher opções, eu digo se poderia haver a possibilidade de usar um select no lugar do input?
    – LeAndrade
    Commented 18/02/2019 às 14:21
  • Não, eu consegui resolver de outra forma, vou adicionar a resposta Commented 18/02/2019 às 16:33

2 Respostas 2

0

Após pesquisar durante um tempo eu encontrei uma forma de abrir o panel através de método.

Pra isso foi adicionado um viewchild do tipo MatAutoCompleteTrigger:

@ViewChild('inputContasB2W', { read: MatAutocompleteTrigger }) trigger: MatAutocompleteTrigger;

E então no meu método de seleção eu fiz no final:

this.trigger.openPanel();
-2

Vi que já teve resposta, mas vou deixar aqui minha solução, caso possa ajudar alguém. Estava tendo um problema bem parecido onde queria fornecer opções orientadas pela pesquisa e gostaria que o usuário pudesse marcar todas as opções sem fechar a caixa de sugestão (mat-autocomplete). Código HTML:

    <input
            [matAutocomplete]="auto"
            (keyup)="filter($event.target.value)"
            #inputSearch
        />

    <mat-autocomplete
        #auto="matAutocomplete"
        (optionSelected)="add($event.option.value)"
    >
            <mat-option
                *ngFor="let item of renderList"
                [value]="item"
                (click)="closeOrOpenPanel($event)"
            >
                {{ item }}
            </mat-option>
    </mat-autocomplete>
    ```
    Código TS:
    ```
    @ViewChild("inputSearch", { read: MatAutocompleteTrigger })
    matTrigger: MatAutocompleteTrigger;

    add(item: string): void {
        renderList.push(item)
    }

    closeOrOpenPanel(event: Event): void {
        event.stopPropagation();
        this.matTrigger.openPanel();
    }
    ```

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .