Topic: Mdb-select component not updated

norbertbede premium asked 6 months ago


Expected behavior

content of the select element should be updated after dynamically adding new values

Actual behavior

When dynamically inserting values into the element, e.g. as follows: <mdb-option * ngFor = "let cart of cartList" [value] = "cart.uuid"> {{cart.poreference}} - the content of the elements is not updated when the content of the "cartList" variable is changed, this is done only after clicking on select.

Resources (screenshots, code snippets etc.)

https://recordit.co/FpL9MJopcs

.HTML

    <div class="w-25">
  <mdb-form-control>
    <mdb-select [(ngModel)]="selectedCart" (ngModelChange)="onSelectedCartChange($event)">
      <mdb-option *ngFor="let cart of cartList" [value]="cart.uuid">{{cart.poreference}}</mdb-option>
    </mdb-select>
    <label mdbLabel class="form-label">{{ 'CART' | translate }}</label>
  </mdb-form-control>
  <div>
    <button (click)="test()">test</button>
  </div>
</div>

.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-nothing-to-show',
  templateUrl: './nothing-to-show.component.html',
  styleUrls: ['./nothing-to-show.component.scss']
})
export class NothingToShowComponent implements OnInit {

  cartList: any[] = [
    {uuid: 1, poreference: 'cart1 (0)'},
    {uuid: 2, poreference: 'cart2 (0)'},
    {uuid: 3, poreference: 'cart3 (0)'},
    {uuid: 4, poreference: 'cart4 (0)'},
  ];
    selectedCart = 1;
  index = 0;

  constructor() { }

  ngOnInit(): void {
  }

  onSelectedCartChange(e) {
        this.selectedCart = e;
    }

  test() {
    this.index++;

    for(let item of this.cartList) {
      item.poreference = String(item.poreference).substring(0, String(item.poreference).indexOf('(')) + '(' + this.index + ')';
    }
  }
}

Arkadiusz Idzikowski staff commented 6 months ago

@norbertbede Could you provide more information about the problem and reproduction steps? I tried to recreate the problem on our end but without success, the options list is correctly updated when a new option is added to the array used in the ngFor directive. Do you use OnPush change detection in your component?


norbertbede premium commented 6 months ago

We do not use OnPush change detection in the component. Angular reacts to the change but the component doesn't react, only when you click on it. We use the following code, maybe you could reproduce the problem with this:

<mdb-form-control>
        <mdb-select [ngModel]="selectedCart" (ngModelChange)="onSelectedCartChange($event)">
          <mdb-option *ngFor="let cart of cartList" [value]="cart.uuid">{{cart.poreference}}</mdb-option>
        </mdb-select>
        <label mdbLabel class="form-label">{{ 'CART' | translate }}</label>
      </mdb-form-control>

There is also a video about it: https://recordit.co/JH5toMFM4S - here we deleted a product in the cart which should have reduced the number in brackets to 2


Arkadiusz Idzikowski staff commented 6 months ago

@norbertbede How is the number in the bracket generated/updated in this case? Could you please edit the first post and provide a simple HTML/TS code demo with fake data so we can use a complete example on our end?

We need more information on what exactly happens in the TS code when you add/delete the items. We tried to dynamically add/remove select options and check how it affects the list of options and selected value, but we could not find any problems in the select component.


norbertbede premium commented 6 months ago

@Arkadiusz Idzikowski the requested code was added above. thanks fror help. n


Arkadiusz Idzikowski staff commented 6 months ago

@norbertbede Thank you, it was very helpful. We previously also updated the options list after changing the label which probably triggered change detection and updated the list.

Unfortunately, we currently don't have a listener that will allow us to detect the change in options label, I added that to our to-do list and we will fix that as soon as possible.

As a workaround for now you can try to call the setDisabledState method after the change in options labels: this.select.setDisabledState(false). You can read more on how to use component methods in our documentation: https://mdbootstrap.com/docs/b5/angular/forms/select/#docsTabsAPI

It is not the cleanest solution but it will allow you to trigger component change detection and update options list.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • User: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 2.0.0
  • Device: Macbook
  • Browser: Chrome, Safari, etc.
  • OS: Mac OS Big Sur
  • Provided sample code: Yes
  • Provided link: Yes