bug(material/select): Dropdown not interactive in zoneless Angular 18 until browser resize

[jahanalem]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I am encountering a significant issue with Angular Material's dropdown in my Angular 18.1.0 application, which is configured to run without zones (ngZone: 'noop'). The dropdown does not open or interact correctly on initial page load. However, once I resize the browser window, the dropdown appears and stays open, but I cannot select any options or close it. After attempting to interact with the dropdown, the entire application hangs, requiring a hard refresh to recover.

Reproduction

StackBlitz link:
Reproduction:
Here’s a specific example of the problematic dropdown within a larger form using Angular reactive forms:

<ng-container *ngIf="brands()">
  <div class="form-group">
    <mat-form-field appearance="outline">
      <mat-label>Brand</mat-label>
      <mat-select formControlName="productBrandId" (selectionChange)="onTypeSelected($event.value!)"
          placeholder="product brands">
        <mat-option *ngFor="let brand of brands()" [value]="brand.id">
          {{brand.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</ng-container>

import { Component, OnInit, OnDestroy, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { EMPTY } from 'rxjs';
import { catchError, switchMap } from 'rxjs/operators';
import { ProductService, StorageService } from 'src/app/core/services';
import { IProduct, IBrand, IProductType, ISizeClassification } from 'src/app/shared/models';

@Component({
  selector: 'app-edit-product',
  templateUrl: './edit-product.component.html',
  styleUrls: ['./edit-product.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class EditProductComponent implements OnInit, OnDestroy {
  productForm!: FormGroup;
  // Initialization and methods...
}

Additional Context:
I recently removed zone.js and switched to using ChangeDetectionStrategy.OnPush. Before these changes, my project worked well. Here’s how my main.ts is configured:

if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule, { ngZone: 'noop' })
  .catch(err => console.error(err));

Known Issues:
I discovered that this might be a known issue with Angular Material when running in a zoneless configuration. Here are links to related issues on GitHub:
#23909
#9169

Steps to Reproduce:
Set up an Angular 18.1.0 application with Angular Material.
Remove zone.js and configure the application to use ngZone: 'noop'.
Implement a form with a mat-select dropdown as shown in the reproduction code.
Load the application and observe the behavior of the mat-select component.

Additional Comments:
Any insights or workarounds to resolve this issue would be greatly appreciated. Thank you for your assistance.

Expected Behavior

The Angular Material dropdown should open, allow selection of options, and close properly on initial page load without needing to resize the browser window. The application should not hang after interacting with the dropdown.

Actual Behavior

The Angular Material dropdown does not open or display on initial load.
Resizing the browser window causes the dropdown to appear and stay open.
Once open, I cannot select any options or close the dropdown.
Clicking on the dropdown or trying other interactions causes the entire app to hang.

Environment

Angular: 18.1.0
Angular Material: 18.1.0
Angular CDK: 18.1.0
ng-bootstrap: 17.0.0
TypeScript: 5.5.3

• Browser(s): Chrome, Firefox, Edge
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[atscott]

Support for Zoneless is only when you are using provideExperimentalZonelessChangeDetection.

Using only NgZone: noop without the provider turns off all automatic change detection. It means you are taking full responsibility for running change detection at the appropriate time and in the appropriate places. There is no real “support” for this configuration as it effectively means “don’t support me, I’ll handle everything myself.”

If you were looking to go Zoneless for your application with a supported configuration, you should use the Zoneless provider.

[crisbeto]

Closing based on Andrew's comment.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}