Clicking scrollbar closes mention list when in MatDialog

[vadimooo]

trafficstars

Trying to use scroll bar in open mention list closes the list. This happens when trying to click up/down arrows or drag the scrollbar. I'm using latest version with Chrome browser.

[dmacfarlane]

I'm unable to reproduce this. Is anyone else having the same issue?

[vadimooo]

Thank you for quick response! I was able to narrow it down - issue only happens when using the component in MatDialog. Something to do with z-index? Any suggestions are much appreciated!

[patch321]

This also happens when clicking on an option from within a bootstrap modal.

[JerinJ]

I'm also facing this issue, our product is nearing production any help will be very much appreciated.!!!!

[architgarg]

I am also facing this issue. I have tested and sure that this issue happens only when textarea resides inside <mat-sidenav>.

[architgarg]

I dug into it and found out this happens when there is tabindex="-1" applied to any parent element.

Since bootstrap modal, matDialog, matSidenav all these components use tabindex="-1" that's why issue happens only in these cases. Though it is not a perfect fix, but I fixed this by removing tabindex like so: (this could not be the ideal solution for everyone, since tabindex="-1" is there for a reason, please do your research before modifying tabindex)

Before:

<mat-sidenav ... > ... </mat-sidenav>

After - added tabindex attribute which removed tabindex="-1" in the dom.

<mat-sidenav tabindex ... > ... </mat-sidenav>

[isviridov-web]

Hello, issue with scroll bar is still present even when using contenteditable

[hvqthong]

This also happens in kendo-dialog, then I remove tabindex like architgarg and it works. Thank you.

[rajsync]

Any Fix for this issue?

[pareshtrivedi]

I fixed it by below hack by removing tabindex and it works fine: In my component:

import { MatDialog, MatDialogRef } from '@angular/material/dialog';

constructor(
    public dialogRef: MatDialogRef<MatDialog>, 
    ...
) { }

ngOnInit(): void {
    this.dialogRef._containerInstance['_elementRef']?.nativeElement.setAttribute('tabindex', '');
    ...
}