Components: Datepicker Pop-up Doesn't Close when Overlay Background is Clicked

[doctorhilarius]

Bug, feature request, or proposal:

When using the touchUi feature of the datepicker, the overlay should close when the overlay background is clicked.

What is the current behavior?

Clicking outside the overlay removes the background but does not close the overlay. After the background is removed, clicking any button on the overlay closes the overlay instead of performing the button's action.

What is the expected behavior?

Clicking outside the overlay should close the overlay. The overlay should not close unless a date is selected or someone clicks outside the overlay.

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

Improve usability

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

Angular: 4.2.0
Material: 2.0.0-beta.6

Is there anything else we should know?

Adding the click listener to the Component's host property provides the correct behavior, even though no action is actually taken when the event occurs:

@Component({
   ...
   host: {
        '(document:click)': 'onClick()',
    }
})
export class MyComponent {
   ...
   private onClick(): void { }
}

[willshowell]

Reproduction? It seems to be working fine here https://plnkr.co/edit/1FUa9Lv8Xmm38eVzPCX6?p=preview for Chrome, Safari, FF

[willshowell]

Nevermind, I am occasionally seeing this too. Working on reproducing

[willshowell]

This demos the issue: https://plnkr.co/edit/nDws65ii76v9xHDQKURU?p=preview

It shows up whenever the parent component uses OnPush

[doctorhilarius]

Ah--yes, you're correct. The issue only appears when the parent component uses OnPush. Thanks!

[z639]

You likely already know (as it probably uses the same resource), but it seems the same is true for MdDialog.

[mmalerba]

@crisbeto I assume this will be addressed by #5422?

[crisbeto]

It could be @mmalerba, but I'm not completely sure. We can revisit this one after #5422 gets in.

[mmalerba]

@crisbeto Actually I think this might be unrelated. Seems to be because the datepicker is explicitly setting the viewContainerRef rather than allowing the dialog to decide it. I'll create a PR

[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._}