PrimeNg multiselect drop-down all checkbox behave inconsistent

Question

Html Code:

<p-multiSelect [options]="selectOptions" maxSelectedLabels="1" defaultLabel="Select" [(ngModel)]="selectedOptions" styleClass="multiselect-mobileregulation-width"></p-multiSelect>

Angular component:

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-component-view',
    templateUrl: './component-view.component.html',
    styleUrls: ['./component-view.component.scss']
})
export class ComponentViewComponent implements OnInit {
    selectOptions: SelectItem[];
    selectedOptions: any;
    ngOnInit() {
            this.selectOptions = [{label: 'Chennai', value: 'chennai'},
            {label: 'Mumbai', value: 'mumbai'},
            {label: 'Mumbai Delhi', value: 'mumbai delhi'},
            {label: 'Kolkatta', value: 'kolkatta'}];
    };
};

Step1. select a item in a drop down

Step2. search another item (chennai) now automatically all check box selected.

Step3. Now check the item (chennai) all check box selection removed.

I don't know why its behave, anyone please give solution to solve this.

Thanks in advace.

Muhammed Albarmavi · Answer 1 · 2019-08-06T10:26:15.380

the toggleAll method work as get the list of all current option (effect by the filter) the toggleAll method will create a new set of selected items regardless of the current selection

if I have select chennai then search by enter mumb the options now just

        {label: 'Mumbai', value: 'mumbai'},
        {label: 'Mumbai Delhi', value: 'mumbai delhi'},

after that you click toggle all this will set the selection value to [ "mumbai", "mumbai delhi" ] and this will remove the previous selected values

this the toggle all method

toggleAll(event: Event) {
    if (this.isAllChecked()) {
        if(this.disabledSelectedOptions && this.disabledSelectedOptions.length > 0) {
            let value = [];
            value = [...this.disabledSelectedOptions];
            this.value = value;
        }
        else {
            this.value = [];
        }
    }
    else {
        let opts = this.getVisibleOptions(); // 
        if (opts) {
            let value = []; //
            if(this.disabledSelectedOptions && this.disabledSelectedOptions.length > 0) {
                value = [...this.disabledSelectedOptions];
            }
            for (let i = 0; i < opts.length; i++) {
                let option = opts[i];

                if (!option.disabled) {
                    value.push(opts[i].value); // 
                }
            }
            this.value = value;
        }
    }

    this.onModelChange(this.value);
    this.onChange.emit({originalEvent: event, value: this.value});
    this.updateLabel();
}

github - multiselect ⚡

PrimeNg multiselect drop-down all checkbox behave inconsistent

1 Answers1