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

feat(date-picker): How to tell whether the picker has been touched? #21643

Closed
andreElrico opened this issue Jan 20, 2021 · 1 comment · Fixed by #21646
Closed

feat(date-picker): How to tell whether the picker has been touched? #21643

andreElrico opened this issue Jan 20, 2021 · 1 comment · Fixed by #21646
Assignees
@crisbeto
Labels
area: material/datepicker feature This issue represents a new feature or feature request rather than a bug or bug fix P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@andreElrico
Copy link

Feature Description

please refer: https://stackblitz.com/edit/angular-dfewqd?file=src/app/datepicker-disabled-example.html

how can we assess that the datepicker icon has been clicked (the popup opened) so essentially the control has been touched? (refer second datepicker in stackblitz)

Use Case

I want to style error state when control is invalid AND it has been touched (meaning the datepicker-popup opened already)

This currently does not work as the input in disabled and therefore it can never be touched :/.

Workaround

My workaround using click on the date-toggle does not work as the method _open() uses prevent-propagation.
The other option is to monkey patch _open(). Highly undesirable.

components/src/material/datepicker/datepicker-toggle.ts

Line 116 in 8172d06

_open(event: Event): void {

would you consider the date-control is touched when the picker-popup has opened?

we could add @output or Observable for clicks on the triger button.
@andreElrico andreElrico added feature This issue represents a new feature or feature request rather than a bug or bug fix needs triage This issue needs to be triaged by the team labels Jan 20, 2021
@crisbeto crisbeto self-assigned this Jan 20, 2021
@crisbeto crisbeto added area: material/datepicker has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Jan 20, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 20, 2021
@crisbeto
fix(material/datepicker): mark date input as touched when calendar is…
f651c30 
… closed

Currently we mark the date input model as touched when it is blurred or the user types
something in, however opening and closing the calendar is also an indicator that the user
has interacted with it.

These changes add some logic to mark the inputs as touched when the calendar is closed as well.

Fixes angular#21643.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 20, 2021
@crisbeto
fix(material/datepicker): mark date input as touched when calendar is…
16a660c 
… closed

Currently we mark the date input model as touched when it is blurred or the user types
something in, however opening and closing the calendar is also an indicator that the user
has interacted with it.

These changes add some logic to mark the inputs as touched when the calendar is closed as well.

Fixes angular#21643.
@crisbeto crisbeto mentioned this issue Jan 20, 2021
Merged
andrewseguin pushed a commit that referenced this issue Jan 25, 2021
@crisbeto
fix(material/datepicker): mark date input as touched when calendar is…
b559786 
… closed (#21646)

Currently we mark the date input model as touched when it is blurred or the user types
something in, however opening and closing the calendar is also an indicator that the user
has interacted with it.

These changes add some logic to mark the inputs as touched when the calendar is closed as well.

Fixes #21643.
andrewseguin pushed a commit that referenced this issue Jan 25, 2021
@crisbeto @andrewseguin
fix(material/datepicker): mark date input as touched when calendar is…
75367e7 
… closed (#21646)

Currently we mark the date input model as touched when it is blurred or the user types
something in, however opening and closing the calendar is also an indicator that the user
has interacted with it.

These changes add some logic to mark the inputs as touched when the calendar is closed as well.

Fixes #21643.

(cherry picked from commit b559786)
wagnermaciel pushed a commit to wagnermaciel/components that referenced this issue Jan 26, 2021
@crisbeto @wagnermaciel
fix(material/datepicker): mark date input as touched when calendar is…
bc1c4ab 
… closed (angular#21646)

Currently we mark the date input model as touched when it is blurred or the user types
something in, however opening and closing the calendar is also an indicator that the user
has interacted with it.

These changes add some logic to mark the inputs as touched when the calendar is closed as well.

Fixes angular#21643.
mmalerba pushed a commit to mmalerba/components that referenced this issue Jan 29, 2021
@crisbeto @mmalerba
fix(material/datepicker): mark date input as touched when calendar is…
2459fd5 
… closed (angular#21646)

Currently we mark the date input model as touched when it is blurred or the user types
something in, however opening and closing the calendar is also an indicator that the user
has interacted with it.

These changes add some logic to mark the inputs as touched when the calendar is closed as well.

Fixes angular#21643.
wagnermaciel pushed a commit to wagnermaciel/components that referenced this issue Feb 8, 2021
@crisbeto @wagnermaciel
fix(material/datepicker): mark date input as touched when calendar is…
cda23d8 
… closed (angular#21646)

Currently we mark the date input model as touched when it is blurred or the user types
something in, however opening and closing the calendar is also an indicator that the user
has interacted with it.

These changes add some logic to mark the inputs as touched when the calendar is closed as well.

Fixes angular#21643.
wagnermaciel pushed a commit to wagnermaciel/components that referenced this issue Feb 8, 2021
@crisbeto @wagnermaciel
fix(material/datepicker): mark date input as touched when calendar is…
3f64955 
… closed (angular#21646)

Currently we mark the date input model as touched when it is blurred or the user types
something in, however opening and closing the calendar is also an indicator that the user
has interacted with it.

These changes add some logic to mark the inputs as touched when the calendar is closed as well.

Fixes angular#21643.
@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 Feb 25, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: material/datepicker feature This issue represents a new feature or feature request rather than a bug or bug fix 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(material/datepicker): mark date input as touched when calendar is closed crisbeto/material2
2 participants
@crisbeto @andreElrico