Taiga UI V4 dropdown not opening

I'm using Angular v17, Taiga UI v4 and Chrome browser. I copied example from Taiga UI documentation to my code to create a very simple select/dropdown component. The problem is, no matter which example I take, the dropdown list doesn't show on click. Here's link to the example: https://taiga-ui.dev/components/select#textfield-customization.

Here's my code:

HTML code:

<ng-container>
<tui-textfield
iconStart="@tui.user-round"
tuiChevron
tuiTextfieldSize="m"
[tuiTextfieldCleaner]="false"
>
<label tuiLabel>I am a label</label>

<input placeholder="I am placeholder" tuiSelect [(ngModel)]="value" />

<tui-data-list-wrapper *tuiTextfieldDropdown new [items]="users" />

<tui-icon
*ngIf="value"
icon="@tui.badge-check"
style="color: var(--tui-status-info); pointer-events: none"
/>

<tui-icon tuiTooltip="I am a hint" />
</tui-textfield>
</ng-container>


TS code:

import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TuiIcon, TuiSelect, TuiTextfield } from '@taiga-ui/core';
import { TuiChevron, TuiDataListWrapper, TuiTooltip } from '@taiga-ui/kit';

@Component({
standalone: true,
imports: [
FormsModule,
NgIf,
TuiChevron,
TuiDataListWrapper,
TuiIcon,
TuiSelect,
TuiTextfield,
TuiTooltip,
],
templateUrl: './company-create-address.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NgCompanyCreateAddressComponent {
protected readonly users = [
'Dmitriy Demenskiy',
'Alex Inkin',
'Vladimir Potekhin',
'Nikita Barsukov',
'Maxim Ivanov',
'German Panov',
];
protected value: string | null = null;
}


Note: this is component nested inside others and is part of dialog. Not sure if that is important for the context.

Continue reading...