Programmatically selecting the selectAllOption doesn't


Topic: Programmatically selecting the selectAllOption doesn't select all options

Dave Moniz pro premium priority asked a week ago

Expected behavior

When executing this code: this.mySelect.selectAllOption.select(); it selects/deselects the <mdb-select-all-option> as well as all the other <mdb-option>

Actual behavior

It only selects the <mdb-select-all-option>


Dave Moniz pro premium priority commented a week ago

I'm trying to have a select that has all options selected prior to first use.

I passed an [(ngModel)] with and array of all of the values -> but this would have all of the <mdb-option> selected, but not the <mdb-select-all-option>... at which point if I select the <mdb-select-all-option> it would present all of the values from the [(ngModel)] in the label instead of all the labels of the selected options. Clicking the <mdb-select-all-option> again resets everything to how it should be.


We don't have a public API that would allow selecting the option programmatically. The approach with ngModel is correct in this case, but we need to fix the bug you mentioned.

As a workaround, you can try to simulate a click event on the select-all option.

HTML:

<mdb-select-all-option #selectAll>Select all</mdb-select-all-option>

TS:

@ViewChild('selectAll', { read: ElementRef}) selectAllEl: ElementRef;

  ngAfterViewInit(): void {
    Promise.resolve().then(() => {
      this.selectAllEl.nativeElement.click();
    });
  }

The wrapper with Promise may not be necessary if you don't run this code on component initialization.


Dave Moniz pro premium priority commented 7 days ago

I used this answer to find a very suitable work around. Thanks for the tip.


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: PC
  • Browser: Google Chrome
  • OS: Arch Linux
  • Provided sample code: No
  • Provided link: No