Topic: mdb-select: "Select All" option unchecks disabled items
Expected behavior When a user clicks the "Select All" option, I would expect the status of disabled list items to remain unchanged. The user should be unable to change the status of disabled items, individually or by the "Select All" method.
Actual behavior When checking "Select All", it correctly skips disabled items and leaves them unselected. When *un*checking "Select All", however, items that are selected and disabled incorrectly become unselected.
If the control is able to skip disabled items when checking "Select All", I would expect it to also skip disabled items when unchecking "Select All".
Resources (screenshots, code snippets etc.) Note: this applies to v7.4.3, which isn't available in the version dropdown.
Link to all demo component files. Here is the important markup and typscript:
multi-select-demo.component.html
<div class="row">
<div class="col-3">
<div class="form-group-sm">
<mdb-select
#multiSelectDemo
id="multiSelectDemo"
[disabled]="multiSelectDemoDisabled"
[filterEnabled]=true
[multiple]="true"
name="multiSelectDemo"
[(ngModel)]="multiSelectDemoSelections"
[notFoundMsg]="notFoundText"
[options]="reportFiltersSelectOptions"
[placeholder]="chooseText"
[visibleOptions]="5">
</mdb-select>
</div>
</div>
</div>
multi-select-demo.component.ts
import { Component, OnInit } from '@angular/core';
import { ListItem } from './mdb-select-list-item';
@Component({
selector: 'app-multi-select-demo',
templateUrl: './multi-select-demo.component.html',
styleUrls: ['./multi-select-demo.component.scss']
})
export class MultiSelectDemoComponent implements OnInit {
chooseText: '(CHOOSE)';
multiSelectDemoDisabled: false;
multiSelectDemoSelections: string[];
notFoundText: 'Search value not found';
reportFiltersSelectOptions: ListItem[];
constructor() { }
ngOnInit() {
this.multiSelectDemoSelections = [];
this.multiSelectDemoSelections.push('option1');
this.multiSelectDemoSelections.push('option2');
this.reportFiltersSelectOptions = [];
this.reportFiltersSelectOptions.push(new ListItem('option1', 'Option 1 - Disabled', true));
this.reportFiltersSelectOptions.push(new ListItem('option2', 'Option 2 - Disabled', true));
this.reportFiltersSelectOptions.push(new ListItem('option3', 'Option 3', false));
this.reportFiltersSelectOptions.push(new ListItem('option4', 'Option 4 - Disabled', true));
}
}
mdb-select-list-item.ts
export class ListItem {
disabled: boolean;
label: string;
value: string;
constructor(value: string, label: string, disabled: boolean = false) {
this.value = value;
this.label = label;
this.disabled = disabled;
};
}
Arkadiusz Idzikowski staff answered 6 years ago
Thank you for letting us know about this problem, we will take a closer look at it. It should be resolved in next version.
You can use [enableSelectAll]="false" to hide this option.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.4.2
- Device: Windows laptop
- Browser: Chrome v73.0.3683.74
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
arolloff commented 6 years ago
Is there/could you add an option to disable/hide the "Select All" option when [multiple]="true"?