bug(mat-select): mat-select multiple crashes Chrome

[HappyTepid]

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

We have an Angular 14 project and a user reported that Chrome would crash for them consistently with the 'sad tab' and error code 11 when they opened certain mat-select inputs. The affected inputs were all multiples, just like this issue.

They are running Chrome Version 124.0.6367.62 on an Apple Silicon Mac, but we have reproduced the issue on Chrome Version 124.0.6367.62 on Windows ARM also.

This issue only seems to affect Chrome, but with no obvious pattern. After a crash, the web inspector reveals nothing unusual, nor is there any console output. I was able to capture chrome debug logs during one such crash, but it did not reveal anything interesting.

I realise that this report isn't particularly useful since I can't reliably reproduce the error, but I suspect this may be happening more widely than is realised since it's unlikely to get picked up by automated error monitoring.

Reproduction

We have not been able to consistently reproduce the issue. Having made no code changes, the issue is manifesting intermittently.

Expected Behavior

Opening a mat-select multiple should not crash Chrome.

Actual Behavior

Chrome crashes when opening mat-select multiple

Environment

• Angular: 14.2.9
• CDK/Material: 14.2.7
• Browser(s): Chrome Version 124.0.6367.62
• Operating System (e.g. Windows, macOS, Ubuntu): Windows and macOS, possibly more

[decnorton]

We've also been experiencing this and can replicate consistently.

• Happens with multiple selection disabled
• Only happens when inside a mat-form-field, and only when clicked
  • Setting floatLabel to always or never does not have an effect
  • Doesn't happen if there's no mat-label element
• Doesn't seem to happen with other input types within mat-form-field
• Seems to happen when the label is transitioning to floating
  • If the mat-select already has a value (through ngModel), the label is already floating and opening the select doesn't crash the tab.
  • Removing the option does cause the crash

No console errors, nor anything other useful indication as to what could be causing it (apart from STATUS_STACK_OVERFLOW message on Windows).

@angular/core: 16.2.11
@angular/material: 16.2.10

Witnessed on

• macOS: Chrome v124.0.6367.62 (Error code 11)
• Windows: Chrome v124.0.6367.61 (Error code: STATUS_STACK_OVERFLOW)

Screen.Recording.2024-04-18.at.17.29.32.mov

[zarend]

Hello, thank you for providing as much detail as possible. Unfortunately, if this is a Chrome issue, then there's nothing that Angular components can do about this.

Have you filed an issue on Chromium?

Best Regards,
Zach

[hook]

Hey guys, I was able to reproduce this in the component library I work on (which has the same implementation with aria/role as this for our custom dropdown). The 2 way relationship below:

<div role="combobox" id="parent" tabindex="0" aria-haspopup="listbox" aria-owns="child">parent</div>
<div role="listbox" id="child" tabindex="-1" aria-labelledby="parent">child</div>

is enough to demo in chrome if you inspect the child or mouse over in Elements devtools. So you can patch by breaking the aria-labelledby if you need to.

Cheers!

[Azbesciak]

@zarend are you aware of that it may be just a result of endless circles done by the library, stack overflow, memory overconsumption or something? And that is not chromium fault then.

[justinpjames]

I can confirm what @hook said. If I open the devtools and remove the aria-owns and aria-labelledby attributes from the mat-select and label, it shows the options and does not crash Chrome.

I am using mat-select single select.

Chrome: 124.0.6367.61
Angular: ^15.2.9
Material: ^15.2.9
Windows 11

[JoeMellon]

As @justinpjames mentioned I've found just removing the aria-owns attribute alone on the mat-label stops it from crashing.

[HappyTepid]

Thanks for sharing that @justinpjames, I've been able to create a directive to apply on the mat-label of the affected inputs which fixes the crash at the expense of accessibility:

import { Directive, ElementRef, AfterViewInit } from '@angular/core';

@Directive({
  selector: '[appRemoveAriaOwns]'
})
export class RemoveAriaOwnsDirective implements AfterViewInit {
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    this.el.nativeElement.parentElement.removeAttribute('aria-owns');
  }
}

[HappyTepid]

Hello, thank you for providing as much detail as possible. Unfortunately, if this is a Chrome issue, then there's nothing that Angular components can do about this.

Have you filed an issue on Chromium?

Best Regards, Zach

Open issue on Chromium here, appreciate this isn't an Angular issue as such, but having a thread to discuss workarounds and troubleshoot is helpful since it seems to be triggered by the HTML Angular produces.

[alx-andru]

Hello, thank you for providing as much detail as possible. Unfortunately, if this is a Chrome issue, then there's nothing that Angular components can do about this.
Have you filed an issue on Chromium?
Best Regards, Zach

Open issue on Chromium here, appreciate this isn't an Angular issue as such, but having a thread to discuss workarounds and troubleshoot is helpful since it seems to be triggered by the HTML Angular produces.

If you are affected, please indicate this in the Chromium bug tracker, it helps the Chrome team to prioritize! (Top right +1 button).

[justinpjames]

Also, if you have mat-select with a placeholder but no mat-label for the mat-elect it will crash Chrome. Luckily, you can use the current workaround if you add a mat-label with the directive above to the mat-select form-field and it will fix the issue.

[bajere]

As a side note, we also have this issue; the above workaround works. But the issue was only seen in MacOS running on intel CPUs, Chrome Version 124.0.6367.62 (Official Build) (x86_64), our M2 Macs worked as expected.

The bug can be replicated on the official docs if you change the version to v14 or v15, and click some of the examples.

[ErikZA]

The same problem happens in angular version 14.3.0.
Chrome version 124.0.6367.61 (official version) 64-bit

Workaround to deal with the error!

export class AppComponent implements OnInit {
  public ngOnInit(): void {
    document.addEventListener('DOMNodeInserted', function () {
      const elements = document.querySelectorAll('[aria-owns]');

      elements.forEach(element => {
        element.removeAttribute('aria-owns');
      });
    });
  }
}

[gtzinos]

Hello everyone, here is a solution that might work for some of us. Nothing more than what the amazing @ErikZA suggested earlier, just packaged as a chrome extension. Feel free to install it to your chrome until they send a hotfix

Go to chrome://extensions
Turn on developer mode
Load unpacked

https://github.com/gtzinos/chrome-hot-fix