Description
Bug, feature request, or proposal:
Bug
What is the expected behavior?
Focus should stay in the dialog when disableClose is true
What is the current behavior?
Clicking on the backdrop of a modal dialog and then hitting Shift-Tab allows a user to escape the focus trap of a Material Dialog whose disableClose property is set to true.
What are the steps to reproduce?
- Open a modal dialog, where the "disableClose" property of the "MatDialogConfig" is set to true.
- Click on the backdrop. (The dialog won't close, which is proper behavior.)
- Press "Shift-Tab" on the keyboard several times, and you'll notice that the focus is hitting elements behind the dialog.
What is the use-case or motivation for changing an existing behavior?
Need to be able to open a truly modal dialog that does not allow a user to escape the focus trap in an uncontrolled manner.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
@angular/material 9.1.2
Is there anything else we should know?
As a less-than-ideal workaround, I'm able to subscribe to the "backdropClick" observable via "MatDialogRef". If I've injected a "ViewContainerRef" instance into the component, then I can grab the "ElementRef.nativeElement" for the component, run a "querySelector" to find the first focusable element, and then call the "focus()" function on any such element that I find.
That code looks like this:
if (matDialogConfig.disableClose)
{
matDialogRef.backdropClick().subscribe((event: MouseEvent) => {
//console.log("Called backdropClick subscription", event, matDialogRef);
const element: any = matDialogRef.componentInstance.viewContainerRef.element.nativeElement;
//console.log("Element for dialog component", element);
const querySelector: string = button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]);
const elements_selectable: any = element.querySelector(querySelector);
//console.log("Selectable elements", elements_selectable);
if (elements_selectable)
{
const element_target: any = Array.isArray(elements_selectable) ? elements_selectable[0] : elements_selectable;
//console.log("Target element", element_target);
element_target.focus();
}
});
}