🐞 - ComboBox - list is not displayed

[expdts]

Playground Link

No response

Description

В Angular v. 16.2.12 и taiga-ui v. 3.84.0 использую ComboBox, который работает без ошибок:

searchString: string | null = '';
private readonly requestRegion$ = new Subject<string>();

requestRegion(query: string | null): Observable<readonly any[] | null> {
  this.requestRegion$.next(query || '');
  return this.responseRegion$;
}

private responseRegion$ = this.requestRegion$.pipe(
  distinctUntilChanged(),
  switchMap(query =>
    of(this.dictAddressList?.region?.filter((_data: any) => TUI_DEFAULT_MATCHER(this.stringifyRegion(_data), query))).pipe(
      delay(Math.random() * 100 + 10),
      startWith(null),
    ),
  ),
  takeUntil(this.destroy$),
  shareReplay({bufferSize: 1, refCount: true}),
);

<div>
  <tui-combo-box
    tuiTextfieldSize="m"
    formControlName="region"
    [tuiTextfieldCleaner]="true"
    [valueContent]="valueRegion"
    [(search)]="searchString"
    [stringify]="stringifyRegion"
  >
    Регион&nbsp;<span class="tui-required"></span>
    <input
      tuiTextfield
      placeholder="Введите регион или название"
    />
    <ng-template
      #valueRegion
      let-item
    >
      <span>{{item?.code}} {{item?.name}}</span>
    </ng-template>
    <ng-template tuiDataList>
      <ng-container *tuiLet="requestRegion(searchString) | async as filteredRegion">
        <tui-data-list *ngIf="filteredRegion; else loadingRegion">
          <button
            *ngFor="let item of filteredRegion"
            tuiOption
            [value]="item"
          >
            <span>{{item?.code}} {{item?.name}}</span>
          </button>
        </tui-data-list>
      </ng-container>
      <ng-template #loadingRegion>
        <tui-loader></tui-loader>
      </ng-template>
    </ng-template>
  </tui-combo-box>
  <tui-error
    formControlName="region"
    [error]="[] | tuiFieldError | async"
  ></tui-error>
</div>

В Angular v. 17.3.12 standalone и taiga-ui v. 3.89.0 использую ComboBox, который работает без ошибок, за исключением того что выпадающий список не отображается:

imports: [
  AsyncPipe,
  FormsModule,
  ReactiveFormsModule,
  TuiInputModule,
  TuiComboBoxModule,
  TuiLetModule,
  TuiDataListModule,
  TuiDataListWrapperModule,
  TuiFieldErrorPipeModule,
  TuiTextfieldControllerModule,
  TuiErrorModule,
  TuiLoaderModule,
  TuiButtonModule
]

searchString: string | null = '';
private readonly requestRegion$ = new Subject<string>();

requestRegion(query: string | null): Observable<readonly any[] | null> {
  this.requestRegion$.next(query || '');
  return this.responseRegion$;
}

private responseRegion$ = this.requestRegion$.pipe(
  distinctUntilChanged(),
  switchMap(query =>
    of(this.dictAddressList?.region?.filter((_data: any) => TUI_DEFAULT_MATCHER(this.stringifyRegion(_data), query))).pipe(
      delay(Math.random() * 100 + 10),
      startWith(null),
    ),
  ),
  takeUntil(this.destroy$),
  shareReplay({bufferSize: 1, refCount: true}),
);

<div>
  <tui-combo-box
    tuiTextfieldSize="m"
    formControlName="region"
    *tuiLet="requestRegion(searchString) | async as filteredRegion"
    [tuiTextfieldCleaner]="true"
    [valueContent]="valueRegion"
    [(search)]="searchString"
    [stringify]="stringifyRegion"
  >
    Регион&nbsp;<span class="tui-required"></span>
    <input
      tuiTextfield
      placeholder="Введите регион или название"
    />
    <ng-template
      #valueRegion
      let-item
    >
      <span>{{ item?.code }} {{ item?.name }}</span>
    </ng-template>
    <ng-template tuiDataList>
      @if (filteredRegion) {
      <tui-data-list>
        @for (item of filteredRegion; track item) {
      <button
        tuiOption
        [value]="item"
      >
        <span>{{ item?.code }} {{ item?.name }}</span>
      </button>
      }
      </tui-data-list>
      } @else {
      <ng-template>
        <tui-loader></tui-loader>
      </ng-template>
      }
    </ng-template>
  </tui-combo-box>
  <tui-error
    formControlName="region"
    [error]="[] | tuiFieldError | async"
  ></tui-error>
</div>

Выпадающий список отображается после того как произвести поиск, но при начальной загрузке не открывается.
Подскажите пожалуйста, что не так?

ComboBox_angular_17.mp4

Angular version

17.3.12

Taiga UI version

3.89.0

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

[expdts]

Причину нашел. Если использовать как временное решение описанное ранее в 2729 следующим образом, то выпадающий список работает:

<ng-template tuiDataList>
  <ng-container *tuiLet="requestRegion(searchString) | async as filteredRegion">
	<tui-data-list *ngIf="filteredRegion; else loadingRegion">
	  <button
		*ngFor="let item of filteredRegion"
		tuiOption
		[value]="item"
	  >
		<span>{{item?.code}} {{item?.name}}</span>
	  </button>
	</tui-data-list>
  </ng-container>
  <ng-template #loadingRegion>
	<tui-loader></tui-loader>
  </ng-template>
</ng-template>

Но если сделать согласно документации используя @if, то это не работает.
Можете ли вы исправить?

[waterplea]

Проверьте, пожалуйста, на 4 версии. Вроде работает, если постараться воспроизвести ваш кейс. Пишите, если не взлетит.