Open SStranks opened 5 months ago
I'm not sure how we'd handle this. The fields are implemented by editable divs, which 'label' won't automatically focus
<label id="thelabel" htmlFor="someLabel">
External label
</label>
<div id="someLabel" aria-labelledby="thelabel" contentEditable>
hello
</div>
I think the expected route would be for you to listen via usePress to the label, then move focus via a ref.
We'd need to decide which ref would make the most sense. I think the DateField ref would make the most sense, in which case we need to useImperativeHandle to expose that method.
In the mean time you could create a focus manager https://react-spectrum.adobe.com/react-aria/FocusScope.html#focusmanager-interface and use focusFirst, that's what we do internally with the label provided via <Label>
It seems that putting a hidden HTML Input element inside the provided Label component works.
<Label>
<input id={props.id} hidden />
</Label>
I'm sorry, I'm not following this. Maybe a Stackblitz or Codesandbox would help?
Provide a general summary of the issue here
When passing in a value to the 'id' prop of DatePicker (and also to an external label 'for' prop), the value is applied to the 'group' sub-component and is not passed on to the controls within. Because the 'group' component is a 'div' and not an input, the external label will not focus (divs are not 'labelable' elements).
Neither the 'DateInput' or 'DateSegment' sub-components accept an id prop, so I can't manually target them; I presume the group sub-component is delegating the ids to its children under the hood somehow, because they do actually end up with ids applied to the generated div spinbuttons.
Passing in an Id from an external label works for the Select and Combobox components; the id gets delegated to the correct sub-component and thus the external label successfully triggers the focus event on that input.
π€ Expected Behavior?
Passing in an Id prop (that is connected to an external label) should result in the user being able to click the external label and the datepicker becomes focused on the first DateSegment input (as happens when using the provided label sub-component).
π― Current Behavior
No focusing occurs because the id prop is delegated to the 'group' sub-component and HTML Labels can only focus on labelable elements (e.g. button, input, textarea, etc).
π Possible Solution
No response
π¦ Context
No response
π₯οΈ Steps to Reproduce
Version
"react-aria-components": "^1.1.1"
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
WSL2 Ubuntu
π§’ Your Company/Team
No response
π· Tracking Issue
No response