adobe · hasegawa-101 · Nov 14, 2025 · Nov 14, 2025 · Nov 14, 2025 · Nov 14, 2025
diff --git a/packages/react-aria-components/src/DateField.tsx b/packages/react-aria-components/src/DateField.tsx
@@ -27,7 +27,7 @@ import {
 import {createCalendar} from '@internationalized/date';
 import {DateFieldState, DateSegmentType, DateSegment as IDateSegment, TimeFieldState, useDateFieldState, useTimeFieldState} from 'react-stately';
 import {FieldErrorContext} from './FieldError';
-import {filterDOMProps, useObjectRef} from '@react-aria/utils';
+import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {FormContext} from './Form';
 import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {Group, GroupContext} from './Group';
@@ -77,6 +77,7 @@ export const DateFieldContext = createContext<ContextValue<DateFieldProps<any>,
 export const TimeFieldContext = createContext<ContextValue<TimeFieldProps<any>, HTMLDivElement>>(null);
 export const DateFieldStateContext = createContext<DateFieldState | null>(null);
 export const TimeFieldStateContext = createContext<TimeFieldState | null>(null);
+const DateInputFocusableRefContext = createContext<ForwardedRef<HTMLElement> | null>(null);
 
 /**
  * A date field allows users to enter and edit date and time values using a keyboard.
@@ -255,6 +256,10 @@ export interface DateInputProps extends SlotProps, StyleRenderProps<DateInputRen
    * @default 'react-aria-DateInput'
    */
   className?: ClassNameOrFunction<DateInputRenderProps>,
+  /**
+   * A ref for the first focusable date segment.
+   */
+  focusableRef?: ForwardedRef<HTMLElement>,
   children: (segment: IDateSegment) => ReactElement
 }
 
@@ -296,15 +301,18 @@ const DateInputStandalone = forwardRef((props: DateInputProps, ref: ForwardedRef
 });
 
 const DateInputInner = forwardRef((props: DateInputProps, ref: ForwardedRef<HTMLDivElement>) => {
-  let {className, children} = props;
+  let {className, children, focusableRef, ...otherProps} = props;
   let dateFieldState = useContext(DateFieldStateContext);
   let timeFieldState = useContext(TimeFieldStateContext);
   let state = dateFieldState ?? timeFieldState!;
 
   return (
-    <>
+    <Provider
+      values={[
+        [DateInputFocusableRefContext, focusableRef || null]
+      ]}>
       <Group
-        {...props}
+        {...otherProps}
         ref={ref}
         slot={props.slot || undefined}
         className={className ?? 'react-aria-DateInput'}
@@ -314,7 +322,7 @@ const DateInputInner = forwardRef((props: DateInputProps, ref: ForwardedRef<HTML
         {state.segments.map((segment, i) => cloneElement(children(segment), {key: i}))}
       </Group>
       <Input className="" />
-    </>
+    </Provider>
   );
 });
 
@@ -378,7 +386,13 @@ export const DateSegment = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   let dateFieldState = useContext(DateFieldStateContext);
   let timeFieldState = useContext(TimeFieldStateContext);
   let state = dateFieldState ?? timeFieldState!;
-  let domRef = useObjectRef(ref);
+  let focusableRef = useContext(DateInputFocusableRefContext);
+
+  // If this is the first editable segment and focusableRef is provided, use it
+  let isFirstEditableSegment = segment.isEditable &&
+    segment.type === state.segments.find(s => s.isEditable)?.type;
+
+  let domRef = useObjectRef(mergeRefs((isFirstEditableSegment && focusableRef) ? focusableRef : null, ref));
   let {segmentProps} = useDateSegment(segment, state, domRef);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
   let {hoverProps, isHovered} = useHover({...otherProps, isDisabled: state.isDisabled || segment.type === 'literal'});

diff --git a/packages/react-aria-components/test/DateField.test.js b/packages/react-aria-components/test/DateField.test.js
@@ -478,4 +478,42 @@ describe('DateField', () => {
     expect(segements[1]).toHaveTextContent('dd');
     expect(segements[2]).toHaveTextContent('yyyy');
   });
+
+  it('should support focusableRef', () => {
+    let focusableRef = React.createRef();
+    let {getAllByRole} = render(
+      <DateField>
+        <Label>Birth date</Label>
+        <DateInput focusableRef={focusableRef}>
+          {segment => <DateSegment segment={segment} />}
+        </DateInput>
+      </DateField>
+    );
+
+    let segments = getAllByRole('spinbutton');
+    expect(focusableRef.current).toBe(segments[0]);
+
+    act(() => {
+      focusableRef.current.focus();
+    });
+
+    expect(document.activeElement).toBe(segments[0]);
+  });
+
+  it('should support focusableRef and ref on DateSegment concurrently', () => {
+    let focusableRef = React.createRef();
+    let segmentRef = React.createRef();
+    let {getAllByRole} = render(
+      <DateField>
+        <Label>Birth date</Label>
+        <DateInput focusableRef={focusableRef}>
+          {segment => <DateSegment segment={segment} ref={segment.type === 'month' ? segmentRef : null} />}
+        </DateInput>
+      </DateField>
+    );
+
+    let segments = getAllByRole('spinbutton');
+    expect(focusableRef.current).toBe(segments[0]);
+    expect(segmentRef.current).toBe(segments[0]);
+  });
 });
diff --git a/packages/react-aria-components/test/DatePicker.test.js b/packages/react-aria-components/test/DatePicker.test.js
@@ -334,4 +334,29 @@ describe('DatePicker', () => {
     let input = group.querySelector('.react-aria-DateInput');
     expect(input).toHaveTextContent('5/30/2000');
   });
+
+  it('should support focusableRef on DateInput', () => {
+    let focusableRef = React.createRef();
+    let {getByRole} = render(
+      <DatePicker>
+        <Label>Birth date</Label>
+        <Group>
+          <DateInput focusableRef={focusableRef}>
+            {(segment) => <DateSegment segment={segment} />}
+          </DateInput>
+          <Button>▼</Button>
+        </Group>
+      </DatePicker>
+    );
+
+    let group = getByRole('group');
+    let segments = within(group).getAllByRole('spinbutton');
+    expect(focusableRef.current).toBe(segments[0]);
+
+    act(() => {
+      focusableRef.current.focus();
+    });
+
+    expect(document.activeElement).toBe(segments[0]);
+  });
 });
diff --git a/packages/react-aria-components/test/DateRangePicker.test.js b/packages/react-aria-components/test/DateRangePicker.test.js
@@ -333,6 +333,69 @@ describe('DateRangePicker', () => {
     }
   });
 
+  it('should support focusableRef', () => {
+    let focusableRef = React.createRef();
+    let secondFocusableRef = React.createRef();
+    let segmentRef = React.createRef();
+    let {getAllByRole} = render(
+      <DateRangePicker>
+        <Label>Birth date</Label>
+        <Group>
+          <DateInput slot="start" focusableRef={focusableRef}>
+            {(segment) => {
+              if (segment.type === 'month') {
+                return <DateSegment segment={segment} ref={segmentRef} />;
+              }
+              return <DateSegment segment={segment} />;
+            }}
+          </DateInput>
+          <span aria-hidden="true">–</span>
+          <DateInput slot="end" focusableRef={secondFocusableRef}>
+            {(segment) => <DateSegment segment={segment} />}
+          </DateInput>
+          <Button>▼</Button>
+        </Group>
+        <Text slot="description">Description</Text>
+        <Text slot="errorMessage">Error</Text>
+        <Popover data-testid="popover">
+          <Dialog>
+            <Label>Hi</Label>
+            <Group>Yo</Group>
+            <Button>Hi</Button>
+            <Text>test</Text>
+            <RangeCalendar>
+              <header>
+                <Button slot="previous">◀</Button>
+                <Heading />
+                <Button slot="next">▶</Button>
+              </header>
+              <CalendarGrid>
+                {(date) => <CalendarCell date={date} />}
+              </CalendarGrid>
+            </RangeCalendar>
+          </Dialog>
+        </Popover>
+      </DateRangePicker>
+    );
+
+    expect(segmentRef.current).toBe(focusableRef.current);
+
+    let segments = getAllByRole('spinbutton');
+    expect(segmentRef.current).toBe(segments[0]);
+
+    act(() => {
+      focusableRef.current.focus();
+    });
+
+    expect(document.activeElement).toBe(segments[0]);
+
+    act(() => {
+      secondFocusableRef.current.focus();
+    });
+
+    expect(document.activeElement).toBe(segments[3]);
+  });
+
   it('should clear contexts inside popover', async () => {
     let {getByRole, getByTestId} = render(
       <DateRangePicker data-foo="bar">