🐞 - Dropdown triggers change detection too frequently

[nsbarsukov]

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

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

<label tuiLabel>
  <input tuiSwitch type="checkbox" [(ngModel)]="open" />
  Show dropdown
</label>

<p
  class="host"
  tuiDropdownDirection="bottom"
  [tuiDropdown]="dropdownContent"
  [tuiDropdownManual]="open"
>
  Dropdown host
</p>

<ng-template #dropdownContent>
  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.
</ng-template>

dropdown-bug.mov

Angular version

18

Taiga UI version

4.4.1

Which browsers have you used?

• Chrome
• Firefox
• Safari
• Edge

Which operating systems have you used?

• macOS
• Windows
• Linux
• iOS
• Android

[splincode]

@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]

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

So, these line cause cyclic change detection

[splincode]

Possible related issues: #8567 #8652