CODEWITHSUNDEEP
angularangular-materialmat-select
Charger-Ang
Charger-Ang

Reputation: 21

mat-select with mat-option using multiple attribute with search bar is unselecting the previously selected value

[Searching for a name and selected the value] (https://i.sstatic.net/a7qHi.png) cleared search bar and searched for a new one, previously selected value got removed

I am using angular material for dropdown(select), I am using this mat-select with multiple attribute and using mat-option with to display all the checkboxes.

in the search bar if I search for name, it shows and once I select the name and clear the search bar and search for a new name, the previously selected value is unselected.

I have tried mat-checkbox inside mat-option, the same result, I have used mat-checkbox instead of mat-option, it did not open the dropdown(makes sense coz its a checkbox and not dropdown).

here is my code

The above 2 images shows my explanation.

.html file

<mat-form-field appearance="fill">
  <mat-label>Select Target Groups</mat-label>
    <mat-select formControlName="targetGroups" multiple [id]="'targetGroups'+i">
      <input matInput placeholder="Search for target groups" type="text" style="height: 35px;"
        (keyup)="searchText($event, 'groupSearch')" (click)="$event.stopPropagation()">
          <section>
            <ng-container *ngFor="let group of targetGroups">
              <mat-option
                *ngIf="groupSearch?.toLowerCase()?group.name?.toLowerCase())?.includes(groupSearch?.toLowerCase()): true"
                   value="{{json.stringify(group.name)}}">{{group.name}}</mat-option>
             </ng-container>
          </section>
     </mat-select>
 </mat-form-field>

edited:

If I try to select without search I can select multiple names

image below all selection

Upvotes: 1

Views: 1250

Answers (1)

Charger-Ang
Charger-Ang

Reputation: 21

I have used another way, by style binding to hide and show the options. it worked very good.

here is the code.

html.file

<ng-container *ngFor="let user of targetUsers">
    <mat-option [style]="{display: getSearchFn(userSearch,user.user_name)? '': 'none'}"
       value="{{json.stringify(user)}}">{{user.user_name}}-({{user.user_email}})</mat-option>
</ng-container>

written the function according to my requirement.

Upvotes: 0

Related Questions