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

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');
  }
}

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');
      });
    });
  }
}

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

<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!!

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

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.

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

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!

@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

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

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 😃

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?

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.

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).

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.

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