admin管理员组

文章数量:1289761

How can we select mat option when press on tab key?, it should work like enter button in mat-autoplete angular 6... In below URL its working when press enter, but whenever we press tab button it should select highlighted option. 

<mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutoplete]="auto">
    <mat-autoplete #auto="matAutoplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autoplete>
  </mat-form-field>

Demo

How can we select mat option when press on tab key?, it should work like enter button in mat-autoplete angular 6... In below URL its working when press enter, but whenever we press tab button it should select highlighted option. 

<mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutoplete]="auto">
    <mat-autoplete #auto="matAutoplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autoplete>
  </mat-form-field>

Demo

  • javascript
  • angular
  • angular-material
  • material-design
  • angular-material2
Share Improve this question edited Mar 8, 2019 at 7:57 Sven Hakvoort 3,6213 gold badges18 silver badges35 bronze badges asked Mar 8, 2019 at 7:05 vinaykumar0459vinaykumar0459 5071 gold badge6 silver badges19 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 9

You can subscribe to this.autoTrigger.panelClosingActions, see stackblitz

If your .html is like

<mat-form-field class="example-full-width">
    <!--see the reference variable-->
    <input #typehead type="text" ...>
    <mat-autoplete #auto="matAutoplete">
       ...
    </mat-autoplete>
</mat-form-field>

In your .ts

@ViewChild( 'typehead', {read:MatAutopleteTrigger})  autoTrigger: MatAutopleteTrigger; 

ngAfterViewInit()
  {
    this.autoTrigger.panelClosingActions.subscribe( x =>{
      if (this.autoTrigger.activeOption)
      {
        console.log(this.autoTrigger.activeOption.value)
        this.myControl.setValue(this.autoTrigger.activeOption.value)
      }
    } )
  }

Update a better aproach (using a directive) in this answer

本文标签：

版权声明：本文标题：javascript - How can we select mat option when press on tab key?, it should work like enter button in mat-autocomplete angular 6 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741401694a2376703.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。