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

Dave Moniz priority asked 3 years 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 priority commented 3 years 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.


Arkadiusz Idzikowski staff answered 3 years ago


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 priority commented 3 years ago

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


Dave Moniz priority answered 3 years ago


Can confirm this is resolved now as of MDB5 1.0.0.

Closing now.


FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: PC
  • Browser: Google Chrome
  • OS: Arch Linux
  • Provided sample code: Yes
  • Provided link: No