Select: Overlay is blocking click events

[timruhle]

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.

[MurhafSousli]

Duplicate of #6927, #9857

[crisbeto]

Closing as a duplicate of #6927 and #9857.

[timruhle]

My knowledge of the internals of this library is very limited, but I struggle to see how #6927 is related to this. I also struggle to see how it's pull request #7779 solves this problem (or #9857) as it adds a small bit of code around scrolling.

[sarahmarciano1]

@timruhle I would like to try your workaround since I am facing the same issue
the pb is that I am using MatMenu instead of MatSelect - do you maybe know how can access the backdropClick listener?
P.S. I also don't really understand how this issue ids related to of #6927 or to #9857.
any help will be highgly appreciated
tnx in advance

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

[sarahmarciano1]

@timruhle tnx a lot for your help!! this is indeed working
but did you notice that the pointer cursor isn't working and also the focus of the button is not going

[timruhle]

@sarahmarciano1 My solution is a hacky one, and isn't quite perfect unfortunately. You could try triggering focus on the element being clicked el.focus()

[sarahmarciano1]

ok I'll try this
tnx a lot for your help!!!

[yanivps]

@timruhle Thanks for the workaround.
Does anybody know if there is any progress on this one in terms of the material library?

[angular-automatic-lock-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.}