-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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
UI x-radio: fix keyboard navigation when value of first/last radio option is null #4308
base: main
Are you sure you want to change the base?
UI x-radio: fix keyboard navigation when value of first/last radio option is null #4308
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Interesting case!
Looks like most of this needs to be refactored...
packages/ui/src/radio.js
Outdated
let index = all.indexOf(option) | ||
let next = all.length > index + 1 ? all[index + 1] : all[0] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let index = all.indexOf(option) | |
let next = all.length > index + 1 ? all[index + 1] : all[0] | |
let index = all.indexOf(option) | |
let next = all[(index + 1 + all.length) % all.length] |
packages/ui/src/radio.js
Outdated
let index = all.indexOf(option) | ||
let prev = index >= 1 ? all[all.indexOf(option) - 1] : all.slice(-1)[0] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let index = all.indexOf(option) | |
let prev = index >= 1 ? all[all.indexOf(option) - 1] : all.slice(-1)[0] | |
let index = all.indexOf(option) | |
let prev = all[(index - 1 + all.length) % all.length] |
When the first or last
x-radio:option
has null as value, then keyboard navigation does not work correctly. It skips that option because it thinks that is already reached the end or beginning of the options array (caused bynext || all[0]
orprev || all.slice(-1)[0]
). See screen recordings as a visual example.Untitled2.mov
Untitled.mov