🐞 - `Dropdown` triggers change detection too frequently

nsbarsukov commented 3 weeks ago

Playground Link

https://stackblitz.com/edit/dropdown-triggers-cd-too-frequently?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.template.html

Description

app.component.ts

```ts import { ChangeDetectionStrategy, Component, DoCheck } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { TuiDropdown, TuiLabel } from '@taiga-ui/core'; import { TuiSwitch } from '@taiga-ui/kit'; @Component({ standalone: true, selector: 'app', templateUrl: './app.template.html', styleUrls: ['./app.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, TuiSwitch, TuiLabel, TuiDropdown], }) export class App implements DoCheck { open = false; ngDoCheck() { console.log('=[tick]='); } } ```

app.template.html

```html Show dropdown

Dropdown host

Taiga UI is fully-treeshakable Angular UI Kit consisting of multiple base libraries and several add-ons. It is based on ng-polymorpheus dynamic content approach and uses Web APIs for Angular for required browser APIs. ```

https://github.com/user-attachments/assets/ec77d5da-f8f6-4771-ab26-094130af2b0d

Angular version

18

Taiga UI version

4.4.1

Which browsers have you used?

[X] Chrome
[ ] Firefox
[ ] Safari
[ ] Edge

Which operating systems have you used?

[X] macOS
[ ] Windows
[ ] Linux
[ ] iOS
[ ] Android

splincode commented 3 weeks ago

@nsbarsukov

What if I comment out this line, the error will continue? I recently encountered this problem, and my guesses led to this code

nsbarsukov commented 3 weeks ago

@splincode I've tried to comment this line – no infinite logs more.

So, these line cause cyclic change detection

splincode commented 3 weeks ago

taiga-family / taiga-ui