Topic: mdb-option list is not always updated when array of items updates
When the array used with mdb-option changes, the list of items should also change
In some unspecified cases, the list remains unchanged, although the array definitely changes
Code sample:
<mdb-option *ngFor="let option of results" [value]="option">
{{option}}
</mdb-option>
Regular implementation Most of the time the options are updated when this.results is modified but few times it is not.
There are no run time errors and setTimeout() doesn't help
Dear @mdb2
Please provide us with the code which produces your problem which you have described. We can't resolve this problem if we don't know how to debug your problem.
Best Regards,
Damian
By default 'this.getFilteredData()' method is called only after input change. Please call this method after data array update, that should resolve the problem.
If I understand correctly "this.getFilteredData()" refers to the code sample in https://mdbootstrap.com/docs/angular/forms/autocomplete/
What it does is just changes this.results. As per my question, there are cases when I change this.results, yet the options list is not updated
mdb2 pro commented 6 years ago
When I mean that this.results changes, I mean that I can see the new value using console.log()
mdb2 pro commented 6 years ago
BTW, refresh does help
Arkadiusz Idzikowski staff commented 6 years ago
Option list in autocomplete is generated from 'this.results' array. If this problem still occurs even with the solution with 'getFilteredData()', could you please provide some code on which I would be able to debug this problem?
mdb2 pro commented 6 years ago
Please correct me if I am wrong, but doesn't getFilteredData() simply changes this.results or is it attached to something behind the scenes ?
Arkadiusz Idzikowski staff commented 6 years ago
That's correct. The option list is generated from the 'result' array, so it should be updated dynamically after you update the data array. If it's not working correctly for you, please provide your MDB Angular version and method responsible for array modifications.
We don't know what changes did you make in autocompleter component and without that it's hard to find the problem and the cause of it.
MDB Angular Pro 7.5.2
<input #SupplierSearch formControlName="sSupplierSearch"
id="sSupplierSearch"
type="text"
autocomplete="off"
class="completer-input form-control mdb-autocomplete mb-0"
(blur)="updateBySupplierSearch($event.target.value)"
[mdbAutoCompleter]="auto"
[clearButtonTabIndex]="-1"
(focus)="focus($event)">
<label for="sSupplierSearch" class="active">Search</label>
<mdb-auto-completer #auto="mdbAutoCompleter"
textNoResults="None found" >
<mdb-option *ngFor="let option of supplierResults" [value]="option">
{{option}}
</mdb-option>
</mdb-auto-completer>
and in code:
this.expense.get('sSupplierSearch').valueChanges.subscribe(term => {
this.searchSuppliers(term);
});
searchSuppliers(term: string) {
this.supplierResults = this.suppliersService.search(term);
console.log(this.supplierResults);
}
Most of the times the list updated but many times it does not and only a page refresh restores functionality.
Always, on input change, searchSuppliers() is called and console.log() dumps correct search results, yet list doesn't change at all
Arkadiusz Idzikowski staff commented 6 years ago
It looks like this problem occurs only in example for reactive forms. We will take a closer look at it.
mdb2 pro commented 6 years ago
I assume you can reproduce it. Please keep me updated
Arkadiusz Idzikowski staff commented 6 years ago
We will let you know when the fix will be available.
Anything I can implement before that ?
Arkadiusz Idzikowski staff commented 5 years ago
The only workaround for now would be to use the version with ngModel.
It should be available on the first of July.
mdb2 pro commented 5 years ago
Any updates ? .
Arkadiusz Idzikowski staff commented 5 years ago
Due to some problems we needed to change release date. It should be available in next week.
mdb2 pro commented 5 years ago
It is very important. Do you have a date ?
Arkadiusz Idzikowski staff commented 5 years ago
It should be available next monday (8 July).
After 3 months of waiting and many promises, the issue is NOT fixed in ver 8 :-(
mdb2 pro commented 5 years ago
If it helps, perhaps it is more evident when the mdb-auto-completer is revealed dynamically when a button is clicked (was hidden on view start)
Damian Gemza staff commented 5 years ago
We'll check this.
Arkadiusz Idzikowski staff commented 5 years ago
Please add proper description of the problem with full html/ts code, reproduction steps and detailed information about actual and expected behavior. We won't be able to help without that.
Also please note that we slightly changed the code in the example for reactive forms. With this code and latest changes the option list should be updated correctly.
mdb2 pro commented 5 years ago
Please check https://mdbootstrap.com/support/angular/mdb-cli-init-failed/
Arkadiusz Idzikowski staff commented 5 years ago
How is it related with this thread?
mdb2 pro commented 5 years ago
It is related because you asked me to create a demo for you
Arkadiusz Idzikowski staff commented 5 years ago
I asked for the html/ts code of the component and detailed description of the problem, because currently we don't even know what to look for.
We made a fix with Control Value Accessor and updated the reactive autocompleter example code and there wasn't any problems with the option list update anymore.
If you want to send a demo app you can always send it to a.idzikowski@mdbootstrap.com
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Open
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.4.0
- Device: NA
- Browser: NA
- OS: NA
- Provided sample code: No
- Provided link: No