I created a dropdown using<mat-select>with search option for list,When I clicks on space button in searchBox it is automatically selecting a list item

Question

Description : I created a dropdown list using which contains list of items and one search field in the list. So that user can search the items in a list instead of scrolling through big list in drop down menu. And can select the items in the list.

Problem : When trying to search a list item in search box. If I want to give space in searchbox while searching. Instead of giving space in text box, it is automatically selecting an item in the select dropdown menu. So I`m unable to search for an item using spaces in search box.

Below is the code snippet.

<mat-select>
<input class="searchBox" placeholder=" Search Here" (input)="searchText($event);">
<mat-option *ngFor="let each of listItems" [value]="each.name">
{{each.name}}
<mat-option>
</mat-select>

When trying to search a list item in search box. If I want to give space in searchbox while searching. Instead of giving space in text box, it is automatically selecting an item in the select dropdown menu. So I`m unable to search for an item using spaces in search box.

My requirement is to give spaces also in search box.

Answer 1

Okay I got your problem here we can use $event.stopPropagation() function to stop selecting an item when giving space in the search column.

Here is the example with your code snippet.

<mat-select>
<input class="searchBox" placeholder=" Search Here" (keyup)="searchText($event);" (keydown)="$event.stopPropagation()">
<mat-option *ngFor="let each of listItems" [value]="each.name">
{{each.name}}
<mat-option>
</mat-select>

This line will solve your problem <input class="searchBox" placeholder=" Search Here" (keyup)="searchText($event);" (keydown)="$event.stopPropagation()">

(keydown)="$event.stopPropagation()" will disable the default feature you described.