Template of an OnPush component is no longer updated after a signal change in some cases #50320

import 'zone.js/dist/zone';
import {
  ChangeDetectionStrategy,
  Component,
  Directive,
  effect,
  signal,
  Input,
  OnChanges,
  OnDestroy,
  SimpleChanges,
  computed,
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';

interface State {
  isInDom: boolean;
  shouldBeInDom: boolean;
}

const createModel = () => {
  const state = signal<State>({
    isInDom: false,
    shouldBeInDom: false,
  });
  const updateState = (changes: Partial<State>) =>
    state.update((value) => ({
      ...value,
      ...changes,
    }));
  const toggle = () => updateState({ shouldBeInDom: !state().shouldBeInDom });
  const setDomState = (isInDom: boolean) => updateState({ isInDom });
  return { state, toggle, setDomState };
};

@Directive({
  standalone: true,
  selector: '[myDirective]',
})
export class MyDirective implements OnChanges, OnDestroy {
  @Input({ required: true })
  myDirective!: ReturnType<typeof createModel>;

  async ngOnChanges(changes: SimpleChanges) {
    // Comment the following line to have the issue on display:
    await 0;
    this.myDirective.setDomState(true);
  }

  async ngOnDestroy() {
    // Uncomment the following line as a work-around to fix the issue:
    // await 0;
    this.myDirective.setDomState(false);
  }
}

@Component({
  selector: 'my-component',
  standalone: true,
  // Comment the following line as a work-around to fix the issue:
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule, MyDirective],
  template: `
    <div *ngIf="state().shouldBeInDom" [myDirective]="model">item is visible</div>
  `,
})
export class MyComponent {
  model = createModel();
  // Uncomment the following line as a work-around to fix the issue:
  // state = this.model.state;
  state = computed(() => this.model.state());

  constructor() {
    // Uncomment the following line as a work-around to fix the issue:
    // effect(() => console.log(this.state()));
  }
}

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, MyComponent],
  template: `
    <button (click)="c.model.toggle()">Toggle state</button>
    <my-component #c></my-component>
  `,
})
export class App {}

bootstrapApplication(App);