Single select selection will not unselect multiselects

[TomasKatz]

Tag configuratuion:

<mat-select-autocomplete 
[options]="allEvents" 
[multiple]="true" 
[value]="'id'" 
[display]="'name'" 
name='parentEvent' 
ngDefaultControl
formControlName="parentEvent">
</mat-select-autocomplete>	

options Object:

[
    {
       name:'a',
       id:1
    },
    {
       name:'b',
       id:2
     },
    {
       name:'c',
       id:3
     }
    //... about 200 more items
]

Way to reproduce: Select an the "all options checkbox" -> see that all options were selected -> click again on the "select all/ unselect all" checkbox -> result: selected options do not get unselected, they stay selected.

[HansWouters]

I probably have a clue why the issue occurs: When unselecting, this code runs:

  const filteredValues = this.getFilteredOptionsValues();
  this.selectedValue = this.selectedValue.filter(item => !filteredValues.includes(item));
...
    getFilteredOptionsValues() {
        /** @type {?} */
        const filteredValues = [];
        this.filteredOptions.forEach(option => {
            filteredValues.push(option.value);
        });
        return filteredValues;
    }

So for getFilteredOptionsValues to return correct values, the option must have its value filled. You probably want something like option => {filteredValues.push(option[this.value]);}); but it seems like you cannot reach that because of the inner function.

Not sure how to best fix this though, I've not looked into the code deep enough.

[martinoliete]

I have the same problem, Can you resolve this?

[Moazmostafaa]

I had the same problem, Try to map your options list like that :

this.filteredGovItems = this.allGovs.map(x => { return { display: x.name, value: x.id }; });

it will work correctly.