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-list-option): There's no visual selected state on mobile browsers #19876

Closed
nunoarruda opened this issue Jul 6, 2020 · 2 comments · Fixed by #19877
Closed

bug(mat-list-option): There's no visual selected state on mobile browsers #19876

nunoarruda opened this issue Jul 6, 2020 · 2 comments · Fixed by #19877
Assignees
@crisbeto
Labels
area: material/list P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@nunoarruda
Copy link

nunoarruda commented Jul 6, 2020 •
edited
Loading

Reproduction

https://stackblitz.com/angular/aexyvybjrlm?file=src%2Fapp%2Flist-single-selection-example.html (taken from your "List with single selection" example: https://material.angular.io/components/list/examples)

Steps to reproduce:

  1. Open the StackBlitz link above on a mobile browser (Safari on iOS, or Chrome on Android)
  2. Click the items

Expected Behavior

The selected item should have a visual selected state, like on desktop.

Desktop screenshot (macOS, Chrome):
active-state-desktop

Actual Behavior

There's no visual selected state.

Mobile screenshot (iPhone, iOS, Safari):
active-state-desktop

Environment

  • Angular: 10.0.0
  • CDK/Material: 10.0.1
  • Browser(s): Safari
  • Operating System (e.g. Windows, macOS, Ubuntu): iOS

Please fix.

PS: Any workaround we can use while this gets fixed and released?
@nunoarruda nunoarruda added the needs triage This issue needs to be triaged by the team label Jul 6, 2020
@crisbeto crisbeto self-assigned this Jul 6, 2020
@crisbeto crisbeto added area: material/list 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 Jul 6, 2020
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 6, 2020
@crisbeto
fix(list): single selection list selected state not shown on touch de…
65c0c91 
…vices

We have some extra CSS rules to prevent sticky hover states on touch devices. The problem is that we use the hover style to indicate a selected item in a single selection list and it breaks in a way that prevents the selected state from showing up for touch devices. These changes make the selector more specific to avoid the issue.

Fixes angular#19876.
@crisbeto crisbeto mentioned this issue Jul 6, 2020
Merged
mmalerba pushed a commit that referenced this issue Jul 7, 2020
@crisbeto @mmalerba
fix(list): single selection list selected state not shown on touch de…
bb317f2 
…vices

We have some extra CSS rules to prevent sticky hover states on touch devices. The problem is that we use the hover style to indicate a selected item in a single selection list and it breaks in a way that prevents the selected state from showing up for touch devices. These changes make the selector more specific to avoid the issue.

Fixes #19876.
@nunoarruda
Copy link
Author

nunoarruda commented Jul 7, 2020 •
edited
Loading

For anyone wondering, I'm using the following as a temporary workaround:

@media (hover: none) {
  .mat-list-single-selected-option {
    &:not(.mat-list-item-disabled):hover {
      background: rgba(0, 0, 0, 0.12);
    }
  }
}

mmalerba pushed a commit that referenced this issue Jul 8, 2020
@crisbeto
fix(list): single selection list selected state not shown on touch de…
2eff545 
…vices (#19877)

We have some extra CSS rules to prevent sticky hover states on touch devices. The problem is that we use the hover style to indicate a selected item in a single selection list and it breaks in a way that prevents the selected state from showing up for touch devices. These changes make the selector more specific to avoid the issue.

Fixes #19876.
mmalerba pushed a commit that referenced this issue Jul 8, 2020
@crisbeto @mmalerba
fix(list): single selection list selected state not shown on touch de…
c88bf33 
…vices (#19877)

We have some extra CSS rules to prevent sticky hover states on touch devices. The problem is that we use the hover style to indicate a selected item in a single selection list and it breaks in a way that prevents the selected state from showing up for touch devices. These changes make the selector more specific to avoid the issue.

Fixes #19876.
@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 Aug 8, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: material/list 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(list): single selection list selected state not shown on touch devices crisbeto/material2
2 participants
@nunoarruda @crisbeto