mdb-option list is not always updated when array of items up


Topic: mdb-option list is not always updated when array of items updates

mdb2 pro asked 3 months ago

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>

Arkadiusz Idzikowski staff answered 3 months ago

Could you provide an example of this unexpected behavior?


mdb2 pro answered 3 months ago

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


Damian Gemza staff answered 3 months ago

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


Arkadiusz Idzikowski staff answered 2 months ago

By default 'this.getFilteredData()' method is called only after input change. Please call this method after data array update, that should resolve the problem.


mdb2 pro answered 2 months ago

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 2 months ago

When I mean that this.results changes, I mean that I can see the new value using console.log()


mdb2 pro commented 2 months ago

BTW, refresh does help


Arkadiusz Idzikowski staff commented 2 months 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 2 months 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 2 months 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.


mdb2 pro answered 1 months ago

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 1 months ago

It looks like this problem occurs only in example for reactive forms. We will take a closer look at it.


mdb2 pro commented 1 months ago

I assume you can reproduce it. Please keep me updated


Arkadiusz Idzikowski staff commented 1 months ago

We will let you know when the fix will be available.


mdb2 pro answered 1 months ago

Any news in 7.5.4 ?.


Arkadiusz Idzikowski staff answered 1 months ago

It will be resolved in next release (that should be available in two or three weeks).


mdb2 pro answered 1 months ago

Anything I can implement before that ?


Arkadiusz Idzikowski staff commented 1 months ago

The only workaround for now would be to use the version with ngModel.


mdb2 pro answered 4 weeks ago

Do you have a date, please ?


Arkadiusz Idzikowski staff answered 4 weeks ago

It should be available on the first of July.


mdb2 pro commented 2 weeks ago

Any updates ? .


Arkadiusz Idzikowski staff commented 2 weeks ago

Due to some problems we needed to change release date. It should be available in next week.


mdb2 pro commented 2 weeks ago

It is very important. Do you have a date ?


Arkadiusz Idzikowski staff commented 2 weeks ago

It should be available next monday (8 July).


mdb2 pro answered 6 days ago

After 3 months of waiting and many promises, the issue is NOT fixed in ver 8 :-(


mdb2 pro commented 5 days 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 days ago

We'll check this.


Arkadiusz Idzikowski staff commented 4 days 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 3 days ago

Please check https://mdbootstrap.com/support/angular/mdb-cli-init-failed/


Arkadiusz Idzikowski staff commented 17 hours ago

How is it related with this thread?


mdb2 pro commented 17 hours ago

It is related because you asked me to create a demo for you


Arkadiusz Idzikowski staff commented 16 hours 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


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 7.4.0
  • Device: NA
  • Browser: NA
  • OS: NA
  • Provided sample code: No
  • Provided link: No
Tags