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

itay pro asked 5 years 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>

itay pro answered 5 years ago


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


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


itay 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?


itay 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


Arkadiusz Idzikowski staff answered 5 years ago


It should be available on the first of July.


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


itay 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).


itay pro answered 5 years ago


Do you have a date, please ?


itay pro answered 5 years ago


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.


Arkadiusz Idzikowski staff answered 5 years ago


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


itay pro answered 5 years ago


Any news in 7.5.4 ?.


itay pro answered 5 years 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 5 years ago

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


itay pro commented 5 years ago

I assume you can reproduce it. Please keep me updated


Arkadiusz Idzikowski staff commented 5 years ago

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


itay pro answered 5 years 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


itay pro commented 5 years ago

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


itay pro commented 5 years ago

BTW, refresh does help


Arkadiusz Idzikowski staff commented 5 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?


itay pro commented 5 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 5 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.


Arkadiusz Idzikowski staff answered 5 years 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.


Damian Gemza staff answered 5 years 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


itay pro answered 5 years 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


Arkadiusz Idzikowski staff answered 5 years ago


Could you provide an example of this unexpected behavior?



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: 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