Select: Overlay is blocking click events

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

When mat-select is open, clicking somewhere outside of the options list should still trigger that event.

What is the current behavior?

Overlay is blocking the click events.

What are the steps to reproduce?

https://material.angular.io/components/select/examples.

After clicking on a native example to show the options in the list, with the list still open, you can still click anywhere on the page. After clicking on a material example to show the options list, with the list still open, you must click once to close the list and then again to interact with another element.

What is the use-case or motivation for changing an existing behavior?

Reduces the number of clicks, and is more inline with native behaviour, and expected user experience.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

I am currently using Angular 7.1.1 and Material 7.1.0

Is there anything else we should know?

Similar to #9320, but not the same.

My current workaround which is very hacky and doesn’t have hover effects when the panel is open.

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatSelect } from '@angular/material';

@Component({
  template: ``
})
class MyComponent implements AfterViewInit {
  @ViewChild(MatSelect) public selectComponent: MatSelect;

  public ngAfterViewInit () {
    if (this.selectComponent) {
      let click: MouseEvent = null;
      this.selectComponent.overlayDir.backdropClick.subscribe((event) => {
        // the backdrop element is still in the DOM, so store the event for using after it has been detached
        click = event;
      });

      this.selectComponent.overlayDir.detach.subscribe((a) => {
        if (click) {
          let el = document.elementFromPoint(click.pageX, click.pageY) as HTMLElement;
          el.click();
        }
      });
    }
  }
}

Note that just using this.selectComponent.overlayDir.hasBackdrop = false; makes the clicking and hovering work as expected, but then the panels never close.

[timruhle]

@sarahmarciano1 This was a bit trickier, but I did manage to get it working, see the demo at https://stackblitz.com/edit/angular-material2-issue-v28muy?file=app%2Fapp.component.ts. You should be able to switch between the menus with just one click.

Typescript complains about accessing a couple of private properties, but javascript doesn’t have the notion of public or private, so it runs just fine.

import { Component, ElementRef, ViewChildren, AfterViewInit, QueryList } from '@angular/core';
import { VERSION, MatMenuTrigger } from '@angular/material';
import { OverlayRef } from '@angular/cdk/overlay';

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent implements AfterViewInit {
  version = VERSION;
  @ViewChildren(MatMenuTrigger) menuTriggers: QueryList<MatMenuTrigger>;

  ngAfterViewInit () {

    this.menuTriggers.forEach((menuTrigger) => {
      let button = menuTrigger._element.nativeElement as HTMLButtonElement;
      let click: MouseEvent = null;

      menuTrigger.menuOpened.subscribe(() => {
        let overlayRef = menuTrigger._overlayRef as OverlayRef;
        overlayRef.backdropClick().subscribe((event) => {
          click = event;
        });
      });

      menuTrigger.menuClosed.subscribe(() => {
        // the backdrop was not clicked, so do nothing
        if (!click) {
          return
        }

        let el = document.elementFromPoint(click.pageX, click.pageY) as HTMLElement;

        // this menu's trigger button was clicked, so do nothing, otherwise the menu will just open again
        if (button === el || button.contains(el)) {
          return
        }
        
        el.click();
      });
    });
  }
}

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}