mdb-select: Select All option unchecks disabled items


Topic: mdb-select: "Select All" option unchecks disabled items

arolloff asked 6 years ago

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;
    };
}

arolloff commented 6 years ago

Is there/could you add an option to disable/hide the "Select All" option when [multiple]="true"?


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.


arolloff commented 6 years ago

Excellent. Thank you!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • 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