[BUG] @prizm-ui/components - Switcher не реагирует на выставление выбранного элемента если опции приходят асинхронно

[ZyfraKonstantinKulik]

Библиотека

Выберите нужное отметив галочку [x]

• @prizm-ui/core
• @prizm-ui/components
• @prizm-ui/install
• @prizm-ui/icons
• @prizm-ui/flag-icons
• @prizm-ui/theme
• @prizm-ui/charts
• @prizm-ui/ast
• @prizm-ui/nx-plugin

Компонент

prizm-switcher

Версия

Операционная ситема:

Windows 10

Браузер: Chrome Version 122.0.6261.129 (Official Build) (64-bit)

Google Chrome Версия 96.0.4664.110 (Официальная сборка), (x86_64)

NodeJS:

➜ node --version
v16.13.0

Dependencies:

➜ npm ls @prizm-ui/components

@prizm-ui/components 1.4.4

➜ npm ls @angular/core
$ npm ls @angular/core
npm ERR! code ELSPROBLEMS
npm ERR! invalid: @angular/[email protected] C:\projects\Energy Control\front\node_modules\@angular\core
[email protected] C:\projects\Energy Control\front
├─┬ @angular/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @angular/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @angular/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @angular/[email protected]
│ └── @angular/[email protected] deduped
├── @angular/[email protected]
├─┬ @angular/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @angular/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @angular/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @angular/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @angular/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @ng-web-apis/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @ng-web-apis/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @ng-web-apis/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @ngrx/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @ngrx/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @ngrx/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @ngrx/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @ngrx/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @prizm-ui/[email protected]
│ ├── @angular/[email protected] deduped
│ └─┬ @ng-web-apis/[email protected]
│   └── @angular/[email protected] deduped invalid: ">=15.0.0" from node_modules/angular-svg-icon, "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0" from node_modules/primeng
├─┬ @prizm-ui/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @prizm-ui/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @prizm-ui/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @prizm-ui/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @prizm-ui/[email protected]
│ └── @angular/[email protected] deduped
├─┬ @taiga-ui/[email protected]
│ ├── @angular/[email protected] deduped
│ ├─┬ @ng-web-apis/[email protected]
│ │ └── @angular/[email protected] deduped invalid: ">=15.0.0" from node_modules/angular-svg-icon, "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0" from node_modules/primeng
│ ├─┬ @tinkoff/[email protected]
│ │ └── @angular/[email protected] deduped invalid: ">=15.0.0" from node_modules/angular-svg-icon, "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0" from node_modules/primeng
│ └─┬ @tinkoff/[email protected]
│   └── @angular/[email protected] deduped invalid: ">=15.0.0" from node_modules/angular-svg-icon, "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0" from node_modules/primeng
├─┬ [email protected]
│ └── @angular/[email protected] deduped invalid: ">=15.0.0" from node_modules/angular-svg-icon
├─┬ [email protected]
│ └── @angular/[email protected] deduped invalid: ">=15.0.0" from node_modules/angular-svg-icon
├─┬ [email protected]
│ └── @angular/[email protected] deduped invalid: ">=15.0.0" from node_modules/angular-svg-icon
├─┬ [email protected] invalid: "14.2.4" from node_modules/@prizm-ui/components
│ └── @angular/[email protected] deduped invalid: ">=15.0.0" from node_modules/angular-svg-icon
└─┬ [email protected]
  └── @angular/[email protected] deduped invalid: ">=15.0.0" from node_modules/angular-svg-icon, "^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0" from node_modules/primeng

Проект в котором используется Prizm

• Энергоконтроль

Скрин / Видео проблемы

Воспроизведение проблемы

Проблема воспроизводится, когда мы используем prizm-switcher, опции для которого "switchers" устанавливаются через пайп async. Если выставить желаемое значение для выбора, до того как, опции пришли, когда опции отрисуются значение не будет выбрано а выбрана будет первая опция.

<prizm-switcher [switchers]="switchers$ | async" [selectedSwitcherIdx]="1" type="inner" size="l"></prizm-switcher>

Ожидаем что будет выбрана вторя опция, но выберется первая.

Так же это актруально если просто задать индекс выбранног элемента раньше чем опции

<prizm-switcher [selectedSwitcherIdx]="1" [switchers]="[{title: '1'},{title: '2'}]"  type="inner" size="l"></prizm-switcher>

Ожидаем что будет выбрана вторя опция, но выберется первая.

Описание проблемы