Skip to content

bug(Radio): Option is not selected when clicked while only partially visible. #19397

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
Closed
shesharino opened this issue May 19, 2020 · 1 comment · Fixed by #19505
Closed

bug(Radio): Option is not selected when clicked while only partially visible. #19397

shesharino opened this issue May 19, 2020 · 1 comment · Fixed by #19505
Assignees
@crisbeto
Labels
area: material/radio P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@shesharino
Copy link

Reproduction

https://stackblitz.com/edit/components-issue-jfex36

Steps to reproduce:

  1. Scroll down so that the radio buttons are partially visible, like:
    image

  2. Click on any radio option.

Expected Behavior

The clicked option should be selected even if it's not fully visible.

Actual Behavior

The screen scrolls down and makes the clicked option fully visible, but does not select it.

Environment

  • Angular: 9.0.2.
  • CDK/Material: 9.1.0.
  • Browser: Google Chrome Version 81.0.4044.138 (Official Build) (64-bit).
  • Operating System: Windows 10 Enterprise Version 1809 (OS Build 17763.1217).
@shesharino shesharino added the needs triage This issue needs to be triaged by the team label May 19, 2020
@devversion devversion added area: material/radio 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 May 25, 2020
crisbeto added a commit to crisbeto/material2 that referenced this issue Jun 2, 2020
@crisbeto
fix(radio): not checked on first click if partially visible
1159022 
Currently the native `input` inside the radio button is collapsed down to 1px by 1px and moved to the bottom of the element which causes browsers to scroll the window down, rather than change the value, on the first click when the input is partially hidden. These changes fix the issue by having the input cover the entire button and hiding it with `opacity`. From my testing, using `opacity` versus `cdk-visually-hidden` doesn't make a difference for screen readers.

Fixes angular#19397.
@crisbeto crisbeto mentioned this issue Jun 2, 2020
Merged
@crisbeto crisbeto self-assigned this Jun 2, 2020
@crisbeto crisbeto added the has pr label Jun 2, 2020
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 20, 2020
@crisbeto
fix(material/radio): not checked on first click if partially visible
ff1564e 
Currently the native `input` inside the radio button is collapsed down to 1px by 1px
and moved to the bottom of the element which causes browsers to scroll the window
down, rather than change the value, on the first click when the input is partially
hidden. These changes fix the issue by having the input cover the entire button and
hiding it with `opacity`. From my testing, using `opacity` versus `cdk-visually-hidden`
doesn't make a difference for screen readers.

Fixes angular#19397.
andrewseguin pushed a commit that referenced this issue Feb 18, 2022
@crisbeto
fix(material/radio): not checked on first click if partially visible (#…
f80403c 
…19505)

Currently the native `input` inside the radio button is collapsed down to 1px by 1px
and moved to the bottom of the element which causes browsers to scroll the window
down, rather than change the value, on the first click when the input is partially
hidden. These changes fix the issue by having the input cover the entire button and
hiding it with `opacity`. From my testing, using `opacity` versus `cdk-visually-hidden`
doesn't make a difference for screen readers.

Fixes #19397.
andrewseguin pushed a commit that referenced this issue Feb 18, 2022
@crisbeto @andrewseguin
fix(material/radio): not checked on first click if partially visible (#…
5988b8f 
…19505)

Currently the native `input` inside the radio button is collapsed down to 1px by 1px
and moved to the bottom of the element which causes browsers to scroll the window
down, rather than change the value, on the first click when the input is partially
hidden. These changes fix the issue by having the input cover the entire button and
hiding it with `opacity`. From my testing, using `opacity` versus `cdk-visually-hidden`
doesn't make a difference for screen readers.

Fixes #19397.

(cherry picked from commit f80403c)
@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 Mar 21, 2022
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
@crisbeto @forsti0506
fix(material/radio): not checked on first click if partially visible (a…
99f34c2 
…ngular#19505)

Currently the native `input` inside the radio button is collapsed down to 1px by 1px
and moved to the bottom of the element which causes browsers to scroll the window
down, rather than change the value, on the first click when the input is partially
hidden. These changes fix the issue by having the input cover the entire button and
hiding it with `opacity`. From my testing, using `opacity` versus `cdk-visually-hidden`
doesn't make a difference for screen readers.

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

@crisbeto crisbeto

Labels
area: material/radio 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/radio): not checked on first click if partially visible crisbeto/material2
3 participants
@crisbeto @devversion @shesharino