mdb-select: doesn&#039;t select default value after relo

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

akrolis pro asked 4 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 4 years ago

it doesn't work with patchValue either

Jordan free commented 4 years ago

I am having the same issue

Add comment

Bartosz Termena staff answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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 4 years ago

Thanks, @Bartosz Termena

it worked with setTimeout.

Add comment

Manuel free answered 4 years ago

0 0 Best answer

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.

Add comment

daniel.gschliesser pro answered 4 years ago

1 0 Best answer

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 4 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 4 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 4 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.

Add comment