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

[kevinLourencoDev]

Hi, for info, it's working when we remove aria-owns on element, but that is just not the multiple element. On Angular 15, any select could fail.

Some works for a raison i ignore:
FAIL :

<mat-form-field>
    <mat-label>Favorite food</mat-label>
    <mat-select disableOptionCentering="true" placeholder="Select placeholder">
      <mat-option *ngFor="let item of selectItems" [value]="item.value">
        {{ item.viewValue }}
      </mat-option>
    </mat-select>
    <mat-hint align="start">Hint message</mat-hint>
  </mat-form-field>

WORKS:

  <mat-form-field>
    <mat-label>Select credit card</mat-label>
    <mat-select>
      <mat-option value="1" content-rows
        >
        <div class="cds-ml-2" fxLayout="column">
          <span>**** **** **** **** 1234</span>
          <span class="cds-p3">Exp. 02/25</span>
        </div></mat-option
      >
    </mat-select>
  </mat-form-field>

It's impacts Edge also, so on chromium in general. Only switching to firefox is the correct solution for all users right now.

[Summerstha]

Hi Everyone, I am having the same issues. I am trying to understand the prompts that's given as resolution. I am not a techy person, so trying to understand where to enter /change these prompts. I went to Command prompt and it isn't working. Please provide the steps.
Thank you!

[ssatguru]

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!

So it looks like its not entirely angular. I too was able to reproduce it using a simple non angular page as explained above

[Pavankls]

Hi,
Some of our live users are also facing the same issue while using Chrome - 124.0.6367.61 and edge as well on a specific page which has dynamic drop down. We are not using angular. Upon inspecting the page we observed aria-owns tag is being added. Dev team is unable to replicate this issue and is happening only to specific users.Will upgrading to latest chrome version resolves this issue? or is there any fix in particular?

[miteshdekate93]

<script>
    document.addEventListener('DOMNodeInserted', function () {
      const elements = document.querySelectorAll('[aria-owns]');
      elements.forEach(element => {
        element.removeAttribute('aria-owns');
      });
    });
  </script>

this works for me. Just put this script tag code in your index.html and all good.

[anbiniyar]

<script>
    document.addEventListener('DOMNodeInserted', function () {
      const elements = document.querySelectorAll('[aria-owns]');
      elements.forEach(element => {
        element.removeAttribute('aria-owns');
      });
    });
  </script>

this works for me. Just put this script tag code in your index.html and all good.

Just rolled out this change. Works beautifully well. Thank you so much!!

[Pavankls]

Hi,
Thanks for the suggestion. Aria- owns attribute is removed successfully. But the code doesn't work for removing aria-labelledby tag.

Please help.

[jmzavala]

Hello!!,
This error has been critical for my organization for the last few days.

The directive workaround wasn't an option for me.
A few minutes ago, I created a hot Fix in my platform, replacing the "aria-own" directly in the js file created by angular.

Example:

sed -i 's/aria-owns/failaria-owns/g' main.8153e40XXXXXXX.js

Simple and clean :)

Good luck, angular lovers :)

[giogokul13]

This is now fixed at https://issuetracker.google.com/issues/335553723

[jmzavala]

This is now fixed at https://issuetracker.google.com/issues/335553723

That is true!!! 👍 ; I'm following the original issues too. But I suppose the fix requires a browser update or release. I can't wait for that. This type of issue will be with us for a long time because we don't have control over the versions of all the browsers our users use.

[kevinLourencoDev]

@jmzavala agree with that, but I think the auto version strategy update of Chrome, for fixing it is probably done periodically, in less than 1 month everyone might be on the newer version.
So I would encourage keeping the hotfix for at least 1 month, waiting for an update + stabilization of this issue by chromium team (pretty sure even with the fix, might have some other case / machine not working), then safely removing the removal of aria-owns

[Silverium]

Here a workaround with mutation observer to be applied to the component consuming the mat-select:

const ariaOwnsRemover$ = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'aria-owns') {
      (mutation.target as Element).removeAttribute('aria-owns');
    }
  }
  });

and then in your component:

  ngOnInit() {
    ariaOwnsRemover$.observe(nativeElement, { attributes: true, subtree: true });
...

[sachinsrivastava76]

We also the exact same issue with mat multi select option when mat-label is provided.
I used solution provided by @HappyTepid . It is working for us.

Thanks.

[qannoufoualid]

Are there any other Angular Material components affected by the issue besides mat-select?

[HappyTepid]

Since the underlying Chromium issue's been fixed and we have a wealth of workarounds for those who've yet to upgrade, I'm going to close this issue.

[ArmaandeepSingh123]

This issue still exists

[ArmaandeepSingh123]

Please reopen it

[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.}