Topic: mdb-select: doesn't select default value after reloading options

akrolis pro asked 5 years ago


Expected behavior After reloading the optionsSelect array the default value is selected. This worked ok up to version 8.3.1

Actual behavior After v.8.4.0 update, when reloading optionsSelect array the new options are loaded but the default value is not selected.

Resources (screenshots, code snippets etc.)
html:

<form [formGroup]="testForm">
   <div class="row">
          <div class="col-md-6">
                <mdb-select [options]="optionsSelect" formControlName="testSelect" placeholder="Choose your option"></mdb-select>
                <label>Example label</label>
          </div>
    </div>
</form>
<button (click)="reloadOptions()">Reload</button>

ts:

optionsSelect = [
  { value: '1', label: 'Option 1' },
  { value: '2', label: 'Option 2' },
  { value: '3', label: 'Option 3' },
];

ngOnInit() {
  this.testForm = new FormGroup({
    testSelect: new FormControl('1')
    });
}

reloadOptions(){
    this.optionsSelect = [
        { value: '1', label: 'new option 1' },
        { value: '2', label: 'new option 2' },
        { value: '3', label: 'new option 3' },
      ];

   //   this.testForm.controls.testSelect.setValue('1');
}

tano pro commented 5 years ago

it doesn't work with patchValue either


Jordan free commented 5 years ago

I am having the same issue


Bartosz Termena staff answered 5 years ago


Dear @akrolis

Thank you for reporting the problem. We will try to solve this problem, and restore select behavior, as it was in 8.3.1. I will keep you informed.

As a workaround try to add setTimeout() to your reloadOptions() function

  reloadOptions() {
    this.optionsSelect = [
      { value: '1', label: 'new option 1' },
      { value: '2', label: 'new option 2' },
      { value: '3', label: 'new option 3' },
    ];

    setTimeout(() => {
      this.testForm.controls.testSelect.setValue('1');
    }, 0);
  }

Best Regards, Bartosz.


akrolis pro commented 5 years ago

Thanks, @Bartosz Termena

it worked with setTimeout.


Manuel free answered 4 years ago


This doesn't work yet. From version 8.4.0 I can`t put values to mdb-select multi. For example:

this.searchForm.get('name').value(["1","1"]);

This doesn't work. Please check this, I can't update my app. Before of the version 8.4.0 this worked perfectly.


Arkadiusz Idzikowski staff commented 4 years ago

Please update your MDB Angular version to latest stable version for Angular v8: 8.10.1. There were some bugs in select in 8.4.0 which we fixed in the next updates. This problem should no long occur after update.



Hello,

We have 80+ selects in one of our projects ! This workaround cannot be done here.

Please provide a hotfix as soon as possible. This is a serious, criticle bug!

Thank you very much

Best regards, Daniel


Bartosz Termena staff commented 5 years ago

Hi!

Yes, we will solve this problem as soon as possible, I will let you know about it. Until then, you can use MDB lower version (8.3.0):

npm install git+https://oauth2:<your-auth-token>@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git#8.3.0 

Best Regards, Bartosz.


Jordan free commented 5 years ago

This isn't fixed in 8.5. After I reset the form control, it still retains the value last selected rather than the default value.


Arkadiusz Idzikowski staff commented 5 years ago

It looks like the problem still occur when resetting form control value, we will take a closer look at that and fix it as soon as possible. Please consider downgrading your version until the fix is available. Sorry for the inconveniences.


Jordan free commented 4 years ago

Was this fixed in the 8.6 release?


Bartosz Termena staff commented 4 years ago

Dear @Jordan

Yes, we fixed it in 8.6.0 Best Regards, Bartosz.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.4.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No