Xtykutl

With default html select, you can use your keyboard to search an element in this list but the default delay is a bit short. I need to find a solution to make this timer longer.

I am using material with angular 6 and I found no buildin solution (no property or option in doc). I tried to make my own solution but the default event is overriding mine's.

Here is a my implementation with material : https://stackblitz.com/edit/material-tooltip-select-search?file=src%2Fapp%2Fapp.component.html

As you can see, if I tip 't', 'o', 'n' then 'i', Toni is selected for about 0.1s then the browser select the first name starting with 'i' (Iris).

Is there any other solution than implementing my own (or using material search component, that is not the idea) or is there a way to disable default event ?

Thanks in advance !

SOLUTION:

According to Marshal's answer, I made a directive to do the job : https://stackblitz.com/edit/material-select-search?file=src%2Fapp%2Fselect-search.directive.ts

Seems adding this to your component to stop the default propagation on keydown event does the trick.

constructor(){

     document.addEventListener('keydown', e => {

      if ((e.target as any).nodeName === 'MAT-SELECT') {

        e.stopImmediatePropagation();

      }

    }, true);

  }

Please reference this github issue which provides a stackblitz example.

https://github.com/angular/material2/issues/11654

You need to grab the keydown event and stopImmediatePropagation() before it trickles up to the view/mat-select.. this is why <mat-select placeholder="Favorite food" (keydown)="" will not solve this because the event has already been processed by the mat-select component by the time (keydown) output is fired via template.