The Wayback Machine - https://web.archive.org/web/20220519001339/https://github.com/angular/components/issues/21836
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.

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

feat(MatDatepicker): Add pass-through change and click events to MatDatepickerToggle #21836

Closed
mcalmus opened this issue Feb 8, 2021 · 8 comments · Fixed by #21856
Closed

feat(MatDatepicker): Add pass-through change and click events to MatDatepickerToggle #21836

mcalmus opened this issue Feb 8, 2021 · 8 comments · Fixed by #21856
Assignees
@crisbeto
Labels
area: material/datepicker has pr P3

Comments

@mcalmus
Copy link
Contributor

@mcalmus mcalmus commented Feb 8, 2021

Feature Description

MatDatepickerToggle is a button, but it doesn't have a mechanism for apps that include it to know when it has been changed to clicked. This would be a useful feature.

Use Case

We do click metrics on the site, but I could see other cases where a developer might want to know when the date picker was opened.
@mcalmus mcalmus added feature needs triage labels Feb 8, 2021
@crisbeto
Copy link
Member

@crisbeto crisbeto commented Feb 8, 2021

You should be able to bind a (click) event to the mat-datepicker-toggle and I'm not sure whether a change event makes sense on a button. There already is a dateChange on the datepicker input. Would that work for you?
@crisbeto crisbeto added area: material/datepicker needs clarification and removed needs triage labels Feb 8, 2021
@mcalmus
Copy link
Contributor Author

@mcalmus mcalmus commented Feb 9, 2021

(click) is not firing for me. Nor is there a click event firing with my @HostListener (not shown).

https://stackblitz.com/edit/components-issue-uosggb?file=src/app/example-component.ts
@Totati
Copy link

@Totati Totati commented Feb 9, 2021

Hi, the event propegetion is stopped, because it would focus the mat-form-field. https://github.com/angular/components/blob/master/src/material/datepicker/datepicker-toggle.ts#L116
@crisbeto
Copy link
Member

@crisbeto crisbeto commented Feb 9, 2021

I think that we should remove the stopPropagation and find a different way of preventing focus from reaching the form field.
@crisbeto crisbeto added P3 and removed feature needs clarification labels Feb 9, 2021
@crisbeto crisbeto self-assigned this Feb 9, 2021
@crisbeto crisbeto added the has pr label Feb 9, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Feb 9, 2021
@crisbeto
fix(material/datepicker): avoid interfering with external click listener
2d0bb9d 
Currently the datepicker toggle's `click` listener is on the inner `button` element and we
call `stopPropagation` on it in order to prevent the form field from focusing the input.
The problem is that doing so will also prevent any custom `click` handler that the user
might have added to the `mat-datepicker-toggle`.

These changes resolve the issue by moving the listener directly onto the toggle host
which will invoke any external listeners while still allowing us to stop its propagation.

Fixes angular#21836.
@crisbeto crisbeto mentioned this issue Feb 9, 2021
Merged
mmalerba pushed a commit that referenced this issue Feb 12, 2021
@crisbeto
fix(material/datepicker): avoid interfering with external click liste…
deebaae 
…ner (#21856)

Currently the datepicker toggle's `click` listener is on the inner `button` element and we
call `stopPropagation` on it in order to prevent the form field from focusing the input.
The problem is that doing so will also prevent any custom `click` handler that the user
might have added to the `mat-datepicker-toggle`.

These changes resolve the issue by moving the listener directly onto the toggle host
which will invoke any external listeners while still allowing us to stop its propagation.

Fixes #21836.
mmalerba pushed a commit that referenced this issue Feb 12, 2021
@crisbeto @mmalerba
fix(material/datepicker): avoid interfering with external click liste…
e60a02b 
…ner (#21856)

Currently the datepicker toggle's `click` listener is on the inner `button` element and we
call `stopPropagation` on it in order to prevent the form field from focusing the input.
The problem is that doing so will also prevent any custom `click` handler that the user
might have added to the `mat-datepicker-toggle`.

These changes resolve the issue by moving the listener directly onto the toggle host
which will invoke any external listeners while still allowing us to stop its propagation.

Fixes #21836.

(cherry picked from commit deebaae)
@mcalmus
Copy link
Contributor Author

@mcalmus mcalmus commented Feb 22, 2021

Not that anyone was asking, but confirmed in 11.2.1.
@crisbeto
Copy link
Member

@crisbeto crisbeto commented Feb 22, 2021

Confirmed that it was fixed or confirmed that it's still happening?
@mcalmus
Copy link
Contributor Author

@mcalmus mcalmus commented Feb 22, 2021

Confirmed as fixed. Sorry.
@angular-automatic-lock-bot
Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Mar 25, 2021

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 Mar 25, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: material/datepicker has pr P3
3 participants
@crisbeto @Totati @mcalmus