Topic: mdb-select: doesn't select default value after reloading options
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');
}
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.
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 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 commented 5 years ago
Was this fixed in the 8.6 release?
Bartosz Termena staff commented 5 years ago
Dear @Jordan
Yes, we fixed it in 8.6.0 Best Regards, Bartosz.
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 5 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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
tano pro commented 5 years ago
it doesn't work with patchValue either
Jordan commented 5 years ago
I am having the same issue