<input> element inside <mat-select> tag angular material

Question

I am trying to put the element inside the tag of the element in angular material. But it's not allowing me to write some text on the input inside select. This is the code that I am using for searching elements in the list. I am using this code inside a bootstrap model. The same code works outside the bootstrap modal perfectly. The model code looks like below

<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">

<mat-select  id="Column_Name" name="Column_Name" placeholder="Select Table First"  [(ngModel)]="PK_Column_Name" multiple>
    <input matInput type="text" style="padding: 10px " placeholder="Search..." (keyup)="onKey($event)"> 
    <mat-option *ngFor="let val of selectedItems;" [value]="val">{{val}}</mat-option>
 </mat-select>

Answer 1

Finally, I found the problem in my code is related to the bootstrap modal. The issue is tabIndex="-1" is blocking us from entering in the input after removing the snip of code it looks like below

<div id="myModal1" class="modal hide" role="dialog">

Then it started working perfectly.