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

bug(mat-datepicker): IOS: Incorrect hover display after year selection #23904

Closed
1 task
ydamato opened this issue Nov 5, 2021 · 2 comments · Fixed by #23915
Closed
1 task

bug(mat-datepicker): IOS: Incorrect hover display after year selection #23904

ydamato opened this issue Nov 5, 2021 · 2 comments · Fixed by #23915
Assignees
@crisbeto
Labels
area: material/datepicker P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@ydamato
Copy link

ydamato commented Nov 5, 2021 •
edited
Loading

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

On IOS when a year is selected, the month cell underneath is highlighted with a focus state.

datepicker.error.mp4

Reproduction

Steps to reproduce:

  1. Go to https://material.angular.io/components/datepicker/examples
  2. Open a date picker and select a year

Expected Behavior

Only the selected month should be highlighted.

Actual Behavior

Selected month and month underneath selected year are highlighted with the same style.

Environment

  • Angular: 12.2.6
  • CDK/Material: 13.0.0
  • Browser(s): Safari
  • Operating System: IOS
@ydamato ydamato added the needs triage This issue needs to be triaged by the team label Nov 5, 2021
@crisbeto crisbeto self-assigned this Nov 7, 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 Nov 7, 2021
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 7, 2021
@crisbeto
fix(material/datepicker): hover styles not disabled on touch devices
512f1cd 
When we introduced the date range picker, some selectors in the calendar became much more specific which ended up overriding the styles that disable the hover indication on touch devices.

Now that we don't need to worry about IE, these changes use the `hover` media query to enable hovering only on non-touch devices instead.

Fixes angular#23904.
@crisbeto crisbeto mentioned this issue Nov 7, 2021
Merged
@SteveBidenko
Copy link

SteveBidenko commented Nov 15, 2021 •
edited
Loading

Just FYI: This issue started from Angular Material v.10.2.7. Could someone push the PR to live?

wagnermaciel pushed a commit that referenced this issue Dec 3, 2021
@crisbeto
fix(material/datepicker): hover styles not disabled on touch devices (#…
106b8a7 
…23915)

When we introduced the date range picker, some selectors in the calendar became much more specific which ended up overriding the styles that disable the hover indication on touch devices.

Now that we don't need to worry about IE, these changes use the `hover` media query to enable hovering only on non-touch devices instead.

Fixes #23904.
wagnermaciel pushed a commit that referenced this issue Dec 3, 2021
@crisbeto @wagnermaciel
fix(material/datepicker): hover styles not disabled on touch devices (#…
8de3808 
…23915)

When we introduced the date range picker, some selectors in the calendar became much more specific which ended up overriding the styles that disable the hover indication on touch devices.

Now that we don't need to worry about IE, these changes use the `hover` media query to enable hovering only on non-touch devices instead.

Fixes #23904.

(cherry picked from commit 106b8a7)
@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 Jan 3, 2022
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
@crisbeto @forsti0506
fix(material/datepicker): hover styles not disabled on touch devices (a…
cf73197 
…ngular#23915)

When we introduced the date range picker, some selectors in the calendar became much more specific which ended up overriding the styles that disable the hover indication on touch devices.

Now that we don't need to worry about IE, these changes use the `hover` media query to enable hovering only on non-touch devices instead.

Fixes angular#23904.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: material/datepicker 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): hover styles not disabled on touch devices crisbeto/material2
3 participants
@SteveBidenko @crisbeto @ydamato