-
Notifications
You must be signed in to change notification settings - Fork 6.7k
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
bug(Radio): Option is not selected when clicked while only partially visible. #19397
Labels
area: material/radio
P3
An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Comments
crisbeto
added a commit
to crisbeto/material2
that referenced
this issue
Jun 2, 2020
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
added a commit
to crisbeto/material2
that referenced
this issue
Nov 20, 2020
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
…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
…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)
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
forsti0506
pushed a commit
to forsti0506/components
that referenced
this issue
Apr 3, 2022
…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.
Labels
area: material/radio
P3
An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Reproduction
https://stackblitz.com/edit/components-issue-jfex36
Steps to reproduce:
Scroll down so that the radio buttons are partially visible, like:
![image](https://user-images.githubusercontent.com/34451812/82370072-56751000-99ee-11ea-8a0e-c506dac8e87e.png)
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
The text was updated successfully, but these errors were encountered: