element inside 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>

Okay. Then you should use `mat-autocomplete`. See - https://material.angular.io/components/autocomplete/overview. There are multiple examples provided which match with your requirement. — random, May 05 '22 at 06:35
This I already tried, It doesn't fit my requirement. I don't want user to edit the selected field. — Sai Varun Kumar, May 05 '22 at 06:37
Okay. But since, it is any `input` element, user can enter/change the input value. — random, May 05 '22 at 06:44
Here it is just acting as a search box, user can only filter the list but cannot edit it — Sai Varun Kumar, May 05 '22 at 06:47
As you said, the part of code you show is working. Can you either create a stackblitz with the bootstrap modal that make the code not working or add the not working part in your question. — Alexis, May 05 '22 at 06:53
Might be duplicate of - https://stackoverflow.com/questions/48442794/implement-a-search-filter-for-the-mat-select-component-of-angular-material — random, May 05 '22 at 07:18
Exactly I tried this approach, it is working outside the bootstrap model, but not inside the modal. — Sai Varun Kumar, May 05 '22 at 07:35

score 0 · Answer 1 · answered May 05 '22 at 09:01

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.

element inside tag angular material

1 Answers1