Components: How to disable mat-select keyboard interaction

Created on 3 Apr 2018 · 6Comments · Source: angular/components

Bug, feature request, or proposal:

mat-select has keyboard interaction: up arrow, down arrow to select previous or next option, space/enter to select option and letter to match list item. I need to disable this keyboard interaction. How to disable this?

I've added the following without success:

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

https://stackblitz.com/edit/angular-6kcps1?file=app/select-multiple-example.html

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 5.2.9, angular/material :5.2.2

Is there anything else we should know?

Source

Msimoneau

Most helpful comment

like the example given by @dreamid27 . adding (keydown)="$event.stopPropagation()" with your input. Example with custom filter in mat-select:

    `<mat-select multiple placeholder="List of campaign" [(value)]="campaignsSelected"
        formControlName="excludeCampaigns">

     <input class="select-filter" type="text" (keyup)="filterList($event.target.value, 'campaigns')" 
       placeholder="Enter name or ID campaign" (keydown)="$event.stopPropagation()">

        <mat-option *ngFor="let campaign of campaigns" [value]="campaign">
          {{campaign.id}} - {{campaign.name}} - {{campaign.campaignDate}}
        </mat-option>
      </mat-select>`

Now, i can press space or enter without select a item in my list. enjoy :)

clamarque on 26 Jul 2018

👍20 ❤11 🎉8 🚀5

All 6 comments

There isn't a way to disable this.

jelbourn on 4 Apr 2018

👎4

@jelbourn can i make pull request for this ?

i need this !

dreamid27 on 9 Apr 2018

I don't think this is a feature we would want to add since it effectively turns off a11y

jelbourn on 9 Apr 2018

👎1 👍1

hmm,
i'm try to make custom select with search input in top (like use : panelClass ). but when i try to type like :

"search some item" .
this is not can't work , cause the SELECT lock KEYBOARD EVENT 'SPACE'.

Do you have an alternative for select with autocomplete?

because use just AutoComplete and add some trick method is so painful and hard for some programmer and think not effective.

i have example for this, in angular js : https://material.angularjs.org/latest/demo/select#select-header

dreamid27 on 10 Apr 2018

👍4

like the example given by @dreamid27 . adding (keydown)="$event.stopPropagation()" with your input. Example with custom filter in mat-select:

    `<mat-select multiple placeholder="List of campaign" [(value)]="campaignsSelected"
        formControlName="excludeCampaigns">

     <input class="select-filter" type="text" (keyup)="filterList($event.target.value, 'campaigns')" 
       placeholder="Enter name or ID campaign" (keydown)="$event.stopPropagation()">

        <mat-option *ngFor="let campaign of campaigns" [value]="campaign">
          {{campaign.id}} - {{campaign.name}} - {{campaign.campaignDate}}
        </mat-option>
      </mat-select>`

Now, i can press space or enter without select a item in my list. enjoy :)

clamarque on 26 Jul 2018

👍20 ❤11 🎉8 🚀5

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}