IdsDropdown: Value property not working with dynamic data

[paolo456]

Describe the bug when a user populates the ids-dropdown component with dynamic data, the value property is not able to be set properly. when the value is set to the id of an item in the dropdown list, the item is not shown as selected in the dropdown. the item should appear in the dropdown by default.

create a ids-dropdown component in your html and populate it from an api. make sure the value property in ids-dropdown is set to an id property in ids-list-box-option. before clicking on the dropdown, notice that the dropdown is empty. this is incorrect the dropdown should show the value you have provided.

Code Snippet:

<ids-dropdown
        *ngIf="productConnections.length"
        [id]="'connection-selection-dropdown'"
        [value]="selectedConnection?.id"
        [placeholder]="selectedConnection?.name"
        [disabled]="productConnections.length < 2"
        [label]="lang.get('dataConnection')"
        class="connections-dropdown">
        <ids-list-box>
            <ids-list-box-option
                *ngFor="let product of productConnections"
                (click)="onSelectConnection(product)"
                [value]="product.id"
                [id]="product.id"
                >{{ product.name }}</ids-list-box-option
            >
        </ids-list-box>
</ids-dropdown>

latest version

Platform

• Infor Application/Team Name: Infor OS / insights widget
• Device: MAC
• OS Version: MAC OS 14.5 (23F79)
• Browser Name: chrome
• Browser Version: 127.0.6533.88

[tmcconechy]

Notes:

• was noted it somehow works with placeholder
• its unclear how this is being done? Is it an ngFor?
• need to check if adding items if the value is getting checked after adding them as i suspect it is not

[tmcconechy]

I think this might be fixed by https://github.com/infor-design/enterprise-wc/pull/2729 (a duplicate) i forgot

[anhallbe]

@paolo456 are you sure that selectedConnection has a value? Otherwise you're just setting the dropdown [value] to undefined.

Seems to work for me:

// app.component.ts
import { NgFor, NgIf } from '@angular/common';
import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [NgIf, NgFor],
})
export class AppComponent {
  productConnections: Product[] = [
    {
      id: '1',
      name: 'Product 1',
    },
  ];
  selectedConnection = this.productConnections[0];

  // Fake it to make it compile
  lang = {
    get(key: string) {
      return 'Label';
    },
  };

  onSelectConnection(product: Product) {
    this.selectedConnection = product;
  }
}

type Product = {
  id: string;
  name: string;
};

<!-- app.component.html -->
<ids-container role="main">
  <ids-dropdown
    *ngIf="productConnections.length"
    [id]="'connection-selection-dropdown'"
    [value]="selectedConnection?.id"
    [placeholder]="selectedConnection?.name"
    [disabled]="productConnections.length < 2"
    [label]="lang.get('dataConnection')"
    class="connections-dropdown">
    <ids-list-box-option
      *ngFor="let product of productConnections"
      (click)="onSelectConnection(product)"
      [value]="product.id"
      [id]="product.id">
      {{ product.name }}
    </ids-list-box-option>
  </ids-dropdown>
</ids-container>

ids-enterprise-wc@1.4.2

[paolo456]

@anhallbe does it still work if you remove the placeholder?

[dmcodrum]

How can you use the dropdown with ngModel? That's the 'angular way'. I couldn't get it to work.

[paolo456]

@anhallbe it looks like in the example you provided that the placeholder value is being used. are you able to get it to work with dynamic values?

[tmcconechy]

@clayinfor do you think this is fixed by https://github.com/infor-design/enterprise-wc/pull/2729 ? Can u check or else we can add this to up next.

[clayinfor]

hey @tmcconechy , unfortunately #2729 doesn't fix the issue when placeholder is excluded... I'm working on this now.

[clayinfor]

hey @tmcconechy I've added a PR (https://github.com/infor-design/enterprise-wc/pull/2764) that fixes this issue.