fix: radiogroup navigation #8488
Conversation
|
Build successful! 🎉 |
snowystinger
changed the title
|
Build successful! 🎉 |
| @@ -338,7 +352,15 @@ function useFocusContainment(scopeRef: RefObject<Element[] | null>, contain?: bo | |||
|
|
|||
| e.preventDefault(); | |||
| if (nextElement) { | |||
| focusElement(nextElement, true); | |||
| while (nextElement.tagName === 'INPUT' && nextElement.getAttribute('type') === 'radio' && (nextElement as HTMLInputElement).form) { | |||
There was a problem hiding this comment.
Should we build this logic into focusable tree walker so it works in other places too? Basically just reject radios that aren't the current one so it continues to the next one.
|
Build successful! 🎉 |
…dobe/react-spectrum into fix-radio-tab-navigation-in-focusscope
|
Build successful! 🎉 |
|
Build successful! 🎉 |
| && (node as Element).tagName === 'INPUT' | ||
| && (node as HTMLInputElement).getAttribute('type') === 'radio') { | ||
| // If the radio is in a form, we can get all the other radios by name | ||
| if ((node as HTMLInputElement).form && !isTabbableRadio(node as HTMLInputElement)) { |
There was a problem hiding this comment.
does this mean if the radio group is outside a form it doesn't work?
There was a problem hiding this comment.
yeah, lemme see if i can get something a little better
There was a problem hiding this comment.
ok, that should take care of it, so long as two radio groups can't have the same name some other way other than forms
|
Build successful! 🎉 |
| } else { | ||
| let radioList = element.form?.elements?.namedItem(element.name) as RadioNodeList; | ||
| radios = [...(radioList ?? [])] as HTMLInputElement[]; | ||
| } |
There was a problem hiding this comment.
Ah interesting, I hadn't considered that two radio groups in different forms with the same name are separate, but when outside a form the name must be unique. HTML is fun.
Co-authored-by: Devon Govett <[email protected]>
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
Closes #3883, #6496
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: