Select dropdown bug, adding icon in select box option

[nikvarma]

🪲 Bug report

Describe the bug

in select dropdown with icon option, after selecting value from dropdown, icon name also display in select box.

<h4 lyTyp="title">native html select</h4>
<ly-field>
  <ly-label>Label</ly-label>
  <select lyNativeControl multiple>
    <option value="1"><ly-icon>change_history</ly-icon> item 1</option>
    <option value="2"><ly-icon>change_history</ly-icon> item 2</option>
    <option value="3"><ly-icon>change_history</ly-icon> item 3</option>
  </select>
</ly-field>

expected output:

only dropdown values should display in select box.

[Enlcxx]

Do not use <select multiple> native, it is not supported, instead use <ly-select multiple>, but if you want to use <ly-icon> within <ly-select multiple> be sure to use <ly-select-trigger> for customizing trigger label.

e.g.

<ly-field>
  <ly-select placeholder="Label" [formControl]="fruits" multiple>
    <ly-select-trigger>
      {{fruits.value ? fruits.value[0] : ''}}
      <span *ngIf="fruits.value?.length > 1">
        (+{{fruits.value.length - 1}} {{fruits.value?.length === 2 ? 'other' : 'others'}})
      </span>
    </ly-select-trigger>
    <ly-option *ngFor="let fruit of fruitList" [value]="fruit"><ly-icon>change_history</ly-icon> {{ fruit }}</ly-option>
  </ly-select>
</ly-field>

export class SelectCustomTriggerComponent {
  fruits = new FormControl();
  fruitList = [
    'Apple',
    'Banana',
    'Cherry',
    'Mango',
    'Orange',
    'Pineapple',
    'Strawberry',
  ];
}

[Enlcxx]

is a new feature that is only available for the nightly version.

yarn add @alyle/ui@nightly

[nikvarma]

Thanks for quick reply. but i am using "Minimal" and after updating and adding "ly-select-trigger" getting unknown angular component error.

If 'ly-select-trigger' is an Angular component, then verify that it is part of this module.

any quick solution?

[Enlcxx]

Make sure version 2.9.5-nightly.20191024-k24b8dx7 has been installed.

yarn add @alyle/[email protected]

[Enlcxx]

or you can also install the latest builds

yarn add https://github.com/A-l-y-l-e/alyle-ui-builds.git