-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bug(mat-select): mat-select multiple crashes Chrome #28905
Comments
We've also been experiencing this and can replicate consistently.
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 Witnessed on
Screen.Recording.2024-04-18.at.17.29.32.mov |
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, |
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 Cheers! |
@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. |
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 |
As @justinpjames mentioned I've found just removing the |
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');
}
} |
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). |
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. |
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. |
The same problem happens in angular version 14.3.0. Workaround to deal with the error!
|
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
|
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:
WORKS:
It's impacts Edge also, so on chromium in general. Only switching to firefox is the correct solution for all users right now. |
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. |
Hi, |
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!! |
Hi, Please help. |
Hello!!, The directive workaround wasn't an option for me. Example: sed -i 's/aria-owns/failaria-owns/g' main.8153e40XXXXXXX.js Simple and clean :) Good luck, angular lovers :) |
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. |
@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. |
Here a workaround with mutation observer to be applied to the component consuming the 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 });
... |
We also the exact same issue with mat multi select option when mat-label is provided. Thanks. |
Are there any other Angular Material components affected by the issue besides mat-select? |
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. |
This issue still exists |
Please reopen it |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Is this a regression?
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
multiple
s, 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
The text was updated successfully, but these errors were encountered: