bug(mat-select): Mat Select crashes Chrome tab and edge

[rschulz-scisys]

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

unknown

Description

We have a problem with the angular 15 select component, crashing the current chrome browser (124) at least on macos (intel and arm64 build) and also happens on current edge, but not on safari. In our component wrapper this only happens with multi select values, but on the official demo page the normal component also crashes the browser. The browser crashes as soon as you want to select on option and click to open the list

Reproduction

Go to the official angular15 docs at https://v15.material.angular.io/components/select/overview

click on any list that is not using native with a current chrome browser or edge
see directly the "Aw snap" page

Expected Behavior

show selection list when clicking in the list drop down

Actual Behavior

browser crash "Aw snap"

Environment

• Angular: latest 15
• CDK/Material: latest 15 (legacy and mdc)
• Browser(s): Chrome 124, Edge 124
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS

Hint: Demo pages for Angular 16 and 17 work, only 15 crashes

[iangus]

Been seeing this issue as well, but unable to reproduce it on the 64-bit chrome build. We have been able to reproduce it on arm64 builds as described in the issue details.

[WillPoulson]

Also seeing this issue for any user who updates to the latest chrome.

[vtachkov]

Also happening for us, same situation as mentioned above.

[mateusduraes]

Also happening for me.
I was able to replicate it on both Chrome and Edge.
However, on Firefox, everything works fine.

[danielcornock]

We are having the same issues on Angular 16 using the legacy mat-select. Seems to not effect all instances but does effect most. Have attempted to upgrade to the latest minor version but no luck.

[fgfernandez0321]

There is an open discussion and solution here

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

[JuliusPIV]

Confirmed issue affecting a significant population of our users.

[IslamElKassas]

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

DOMNodeInserted is deprecated.
Instead use this code:

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

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

Tested with Angular 14 and Chrome 124

[qannoufoualid]

i vote to close this because fixed in chromium 🎉 , https://issues.chromium.org/issues/335553723#comment148

[crisbeto]

Closing since this appears to be fixed upstream.