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

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>

Add comment

itay pro answered 5 years ago

0 0 Best answer

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

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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

Add comment

itay pro answered 5 years ago

0 0 Best answer

Do you have a date, please ?

Add comment

itay pro answered 5 years ago

0 0 Best answer

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.

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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

Add comment

itay pro answered 5 years ago

0 0 Best answer

Any news in 7.5.4 ?.

Add comment

itay pro answered 5 years ago

0 0 Best answer

MDB Angular Pro 7.5.2

<pre class="prettyprint"><code> <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>
</code></pre>

and in code:

<pre class="prettyprint"><code> this.expense.get('sSupplierSearch').valueChanges.subscribe(term => {
 this.searchSuppliers(term);
 });

searchSuppliers(term: string) {
 this.supplierResults = this.suppliersService.search(term);
 console.log(this.supplierResults);
}
</code></pre>

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

Please insert min. 20 characters.

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.

Add comment

itay pro answered 5 years ago

0 0 Best answer

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.

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

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

Add comment

itay pro answered 5 years ago

0 0 Best answer