Allow passing inputRef to RAC <Radio> (#6067)

* add focusable ref feature to RadioGroup

* update story

* add filter to getFocusableTreeWalker

* Revert "add focusable ref feature to RadioGroup"

This reverts commit 778dd64.

* Add props.inputRef to <Radio>

* Update RadioGroup.tsx - fix lint

* Update RadioGroup.tsx - fix alphabet

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>
Co-authored-by: Robert Snow <snowystinger@gmail.com>

Author: sookmax

packages/react-aria-components/src/RadioGroup.tsx

@@ -13,15 +13,20 @@
 import {AriaRadioGroupProps, AriaRadioProps, HoverEvents, Orientation, useFocusRing, useHover, useRadio, useRadioGroup, VisuallyHidden} from 'react-aria';
 import {ContextValue, forwardRefType, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {FieldErrorContext} from './FieldError';
-import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {FormValidationBehaviorContext} from './Form';
 import {LabelContext} from './Label';
 import {RadioGroupState, useRadioGroupState} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, useContext, useRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, MutableRefObject, useContext} from 'react';
 import {TextContext} from './Text';
 
 export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<RadioGroupRenderProps>, SlotProps {}
-export interface RadioProps extends Omit<AriaRadioProps, 'children'>, HoverEvents, RenderProps<RadioRenderProps>, SlotProps {}
+export interface RadioProps extends Omit<AriaRadioProps, 'children'>, HoverEvents, RenderProps<RadioRenderProps>, SlotProps {
+  /**
+   * A ref for the HTML input element.
+   */
+  inputRef?: MutableRefObject<HTMLInputElement>
+}
 
 export interface RadioGroupRenderProps {
   /**
@@ -166,9 +171,13 @@ function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
 }
 
 function Radio(props: RadioProps, ref: ForwardedRef<HTMLLabelElement>) {
-  [props, ref] = useContextProps(props, ref, RadioContext);
+  let {
+    inputRef: userProvidedInputRef = null,
+    ...otherProps
+  } = props;
+  [props, ref] = useContextProps(otherProps, ref, RadioContext);
   let state = React.useContext(RadioGroupStateContext)!;
-  let inputRef = useRef<HTMLInputElement>(null);
+  let inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== undefined ? props.inputRef : null));
   let {labelProps, inputProps, isSelected, isDisabled, isPressed} = useRadio({
     ...removeDataAttributes<RadioProps>(props),
     // ReactNode type doesn't allow function children.

packages/react-aria-components/test/RadioGroup.test.js

@@ -490,4 +490,32 @@ describe('RadioGroup', () => {
     expect(groupRef.current).toBe(getByRole('radiogroup'));
     expect(radioRef.current).toBe(getByRole('radio').closest('.react-aria-Radio'));
   });
+
+  it('should support input ref', () => {
+    let inputRef = React.createRef();
+    let {getByRole} = render(
+      <RadioGroup>
+        <Label>Test</Label>
+        <Radio inputRef={inputRef} value="a">A</Radio>
+      </RadioGroup>
+    );
+    let radio = getByRole('radio');
+    expect(inputRef.current).toBe(radio);
+  });
+
+  it('should support and merge input ref on context', () => {
+    let inputRef = React.createRef();
+    let contextInputRef = React.createRef();
+    let {getByRole} = render(
+      <RadioGroup>
+        <Label>Test</Label>
+        <RadioContext.Provider value={{inputRef: contextInputRef}}>
+          <Radio inputRef={inputRef} value="a">A</Radio>
+        </RadioContext.Provider>
+      </RadioGroup>
+    );
+    let radio = getByRole('radio');
+    expect(inputRef.current).toBe(radio);
+    expect(contextInputRef.current).toBe(radio);
+  });
 });