Focus DateRangePicker via my app's existing Label component?

[dadamssg]

I already have a Label component in my app that i'd like to use with the DateRangePicker. The Label from react-aria-components focuses the DateRangePicker on click which is expected and nice. I'd like to have that some functionality when i use my app's Label component. Is there a way to achieve this via props, or some other way, and while my Label is outside of the DateRangePicker's children?

Sandbox

It's minor, but it bothers me that this label situation would be different than all of the rest of my app's input elements:

<Label htmlFor="firstName">First Name</Label>
<Input id="firstName" name="firstName" />

<Label htmlFor="birthYear">Born</Label>
<Select id="birthYear" name="birthYear">
  <option>1987</option>
  <option>1988</option>
  ...
</Select>

<Label htmlFor="bio">Bio</Label>
<Textarea id="bio" name="bio" />

<AppDateRangePicker id="tripDate" label="Trip Date" />

[devongovett]

One thing with this is that by using <label> directly rather than <Label> from react-aria-components it won't get the HTML attributes passed to it from the DateRangePicker or other components (via context). That includes things like ids, aria attributes, event handlers, etc. Also for date picker in particular, it isn't a native <input> element under the hood, so a <label> element isn't actually the right HTML element semantically either. <Label> handles this automatically because it is sent an elementType via the DateRangePicker.

So there are two options:

1. Add a prop to your AppLabel component that allows passing in an element type, e.g. <AppLabel as={Label}>. Then render the props.as component instead of <label> if provided. Example

   function AppLabel(props) {
     let Label = props.as || 'label';
     return <Label {...props} />;
   }

2. Make your AppLabel component also receive props via context from the react-aria-component that it is within the same way as <Label> does. The context we use is exported so you can do the same thing in your component. Then you can use AppLabel directly without <Label>.

   react-spectrum/packages/react-aria-components/src/Label.tsx

   Lines 23 to 26 in 7f41c64

   	[props, ref] = useContextProps(props, ref, LabelContext);
   	let {elementType: ElementType = 'label', ...labelProps} = props;
   	// @ts-ignore
   	return <ElementType className="react-aria-Label" {...labelProps} ref={ref} />;

You can also pass an elementType to Label like <Label elementType={AppLabel}> but this would mean that your AppLabel would render a <label> element rather than the element type that DateRangePicker wants (a <span>). Right now there isn't a good way to have that passed through.

[dadamssg]

thank you for the detailed response!

I think i'll go with something like this and use the useContextProps() in a DateRangeLabel component:

import {DateRangePickerContext, DateRangePicker, DateRangeLabel} from '~/DateRangePicker`

<DateRangePickerContext>
  <DateRangeLabel>Trip Dates</DateRangeLabel>
  <DateRangePicker />
</DateRangePicker>

Where DateRangePickerContext is a re-export of the DateRangePicker from react-aria-components and DateRangePicker is my component responsible for rendering the Group and Popover. This way i have distinct label vs control elements.

I'll also use that props.as trick to use my existing Label component under the hood.