Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Datepicker Pop-up Doesn't Close when Overlay Background is Clicked #5118

Closed
doctorhilarius opened this issue Jun 13, 2017 · 9 comments · Fixed by #6026
Closed

Datepicker Pop-up Doesn't Close when Overlay Background is Clicked #5118

doctorhilarius opened this issue Jun 13, 2017 · 9 comments · Fixed by #6026
Assignees
@mmalerba
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@doctorhilarius
Copy link

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
Copy link
Contributor

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

@willshowell
Copy link
Contributor

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

@willshowell
Copy link
Contributor

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

It shows up whenever the parent component uses OnPush

@doctorhilarius
Copy link
Author

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

@kara kara added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Jun 14, 2017
@z639
Copy link

z639 commented Jun 19, 2017

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

@z639 z639 mentioned this issue Jun 19, 2017
Closed
30 tasks
@mmalerba
Copy link
Contributor

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

@crisbeto
Copy link
Member

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

@mmalerba
Copy link
Contributor

@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

@mmalerba mmalerba mentioned this issue Jul 25, 2017
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 31, 2017
@crisbeto
fix(dialog): better handling of custom ViewContainerRef with OnPush c…
5338d44 
…hange detection

* Adds a `markForCheck` call after starting the dialog animation, in order to ensure that it animates away if it was opened from a component with OnPush change detection.
* Since we can't know whether the animation will start right after the `markForCheck`, these changes switch to starting the backdrop animation together with the dialog animation. This avoids some slight timing issues where the backdrop can start its animation a little too early.
* Simplifies the dialog animation streams to avoid having to subscribe to the `completed` callback in the `MdDialogRef`.
* Fixes the demo app sidenav jumping to the bottom when it is opened from the homepage.
* Fixes some alignment in the dialog demo that got thrown off by the new input width.

The dialog changes should solve issues like angular#5118.
@crisbeto crisbeto mentioned this issue Jul 31, 2017
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 31, 2017
@crisbeto
fix(dialog): better handling of custom ViewContainerRef with OnPush c…
dcadc2d 
…hange detection

* Adds a `markForCheck` call after starting the dialog animation, in order to ensure that it animates away if it was opened from a component with OnPush change detection.
* Since we can't know whether the animation will start right after the `markForCheck`, these changes switch to starting the backdrop animation together with the dialog animation. This avoids some slight timing issues where the backdrop can start its animation a little too early.
* Simplifies the dialog animation streams to avoid having to subscribe to the `completed` callback in the `MdDialogRef`.
* Fixes the demo app sidenav jumping to the bottom when it is opened from the homepage.
* Fixes some alignment in the dialog demo that got thrown off by the new input width.

The dialog changes should solve issues like angular#5118.
tinayuangao pushed a commit that referenced this issue Jul 31, 2017
@crisbeto @tinayuangao
fix(dialog): better handling of custom ViewContainerRef with OnPush c…
e9977b5 
…hange detection

* Adds a `markForCheck` call after starting the dialog animation, in order to ensure that it animates away if it was opened from a component with OnPush change detection.
* Since we can't know whether the animation will start right after the `markForCheck`, these changes switch to starting the backdrop animation together with the dialog animation. This avoids some slight timing issues where the backdrop can start its animation a little too early.
* Simplifies the dialog animation streams to avoid having to subscribe to the `completed` callback in the `MdDialogRef`.
* Fixes the demo app sidenav jumping to the bottom when it is opened from the homepage.
* Fixes some alignment in the dialog demo that got thrown off by the new input width.

The dialog changes should solve issues like #5118.
tinayuangao pushed a commit that referenced this issue Aug 1, 2017
@crisbeto @tinayuangao
fix(dialog): better handling of custom ViewContainerRef with OnPush c…
fa4f7b6 
…hange detection

* Adds a `markForCheck` call after starting the dialog animation, in order to ensure that it animates away if it was opened from a component with OnPush change detection.
* Since we can't know whether the animation will start right after the `markForCheck`, these changes switch to starting the backdrop animation together with the dialog animation. This avoids some slight timing issues where the backdrop can start its animation a little too early.
* Simplifies the dialog animation streams to avoid having to subscribe to the `completed` callback in the `MdDialogRef`.
* Fixes the demo app sidenav jumping to the bottom when it is opened from the homepage.
* Fixes some alignment in the dialog demo that got thrown off by the new input width.

The dialog changes should solve issues like #5118.
tinayuangao pushed a commit that referenced this issue Aug 2, 2017
@crisbeto @tinayuangao
fix(dialog): better handling of custom ViewContainerRef with OnPush c…
5967f6e 
…hange detection (#6164)

* Adds a `markForCheck` call after starting the dialog animation, in order to ensure that it animates away if it was opened from a component with OnPush change detection.
* Since we can't know whether the animation will start right after the `markForCheck`, these changes switch to starting the backdrop animation together with the dialog animation. This avoids some slight timing issues where the backdrop can start its animation a little too early.
* Simplifies the dialog animation streams to avoid having to subscribe to the `completed` callback in the `MdDialogRef`.
* Fixes the demo app sidenav jumping to the bottom when it is opened from the homepage.
* Fixes some alignment in the dialog demo that got thrown off by the new input width.

The dialog changes should solve issues like #5118.
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@mmalerba mmalerba

Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(datepicker): use correct viewContainerRef for dialog. mmalerba/components
6 participants
@kara @crisbeto @willshowell @mmalerba @doctorhilarius @z639