Skip to content

feat: Add focusableRef support to DateInput #9185

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.

Sign up for GitHub

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+65 −5
Open

feat: Add focusableRef support to DateInput #9185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4e8d6fa
feat: Add `focusableRef` support to `DateInput`
hasegawa-101 Nov 14, 2025
90fbb26
test: remove redundant focusableRef tests in DatePicker and DateField
hasegawa-101 Nov 14, 2025
fee41cf
test: clean up redundant comments in DatePicker and DateField tests
hasegawa-101 Nov 14, 2025
9cddf2d
refactor: simplify focusableRef comment in DateField component
hasegawa-101 Nov 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 19 additions & 5 deletions packages/react-aria-components/src/DateField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
}

Expand Down Expand Up @@ -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'}
Expand All @@ -314,7 +322,7 @@ const DateInputInner = forwardRef((props: DateInputProps, ref: ForwardedRef<HTML
{state.segments.map((segment, i) => cloneElement(children(segment), {key: i}))}
</Group>
<Input />
</>
</Provider>
);
});

Expand Down Expand Up @@ -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((isFirstEditableSegment && focusableRef) ? focusableRef : ref);
let {segmentProps} = useDateSegment(segment, state, domRef);
let {focusProps, isFocused, isFocusVisible} = useFocusRing();
let {hoverProps, isHovered} = useHover({...otherProps, isDisabled: state.isDisabled || segment.type === 'literal'});
Expand Down
21 changes: 21 additions & 0 deletions packages/react-aria-components/test/DateField.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -478,4 +478,25 @@ 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]);
});
});
25 changes: 25 additions & 0 deletions packages/react-aria-components/test/DatePicker.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
});
});