diff --git a/packages/react-aria-components/src/RadioGroup.tsx b/packages/react-aria-components/src/RadioGroup.tsx index c9e81c140c3..32926cd69fc 100644 --- a/packages/react-aria-components/src/RadioGroup.tsx +++ b/packages/react-aria-components/src/RadioGroup.tsx @@ -18,7 +18,7 @@ import {FormContext} from './Form'; import {forwardRefType, RefObject} from '@react-types/shared'; import {LabelContext} from './Label'; import {RadioGroupState, useRadioGroupState} from 'react-stately'; -import React, {createContext, ForwardedRef, forwardRef} from 'react'; +import React, {createContext, ForwardedRef, forwardRef, useMemo} from 'react'; import {TextContext} from './Text'; export interface RadioGroupProps extends Omit, RACValidation, RenderProps, SlotProps {} @@ -186,7 +186,7 @@ export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio } = props; [props, ref] = useContextProps(otherProps, ref, RadioContext); let state = React.useContext(RadioGroupStateContext)!; - let inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== undefined ? props.inputRef : null)); + let inputRef = useObjectRef(useMemo(() => mergeRefs(userProvidedInputRef, props.inputRef !== undefined ? props.inputRef : null), [userProvidedInputRef, props.inputRef])); let {labelProps, inputProps, isSelected, isDisabled, isPressed} = useRadio({ ...removeDataAttributes(props), // ReactNode type doesn't allow function children. diff --git a/packages/react-aria-components/stories/RadioGroup.stories.tsx b/packages/react-aria-components/stories/RadioGroup.stories.tsx index 94ab2a27e87..0ecc72721e6 100644 --- a/packages/react-aria-components/stories/RadioGroup.stories.tsx +++ b/packages/react-aria-components/stories/RadioGroup.stories.tsx @@ -10,7 +10,7 @@ * governing permissions and limitations under the License. */ -import {Button, Dialog, DialogTrigger, Label, Modal, ModalOverlay, Radio, RadioGroup} from 'react-aria-components'; +import {Button, Dialog, DialogTrigger, FieldError, Form, Label, Modal, ModalOverlay, Radio, RadioGroup} from 'react-aria-components'; import React, {useState} from 'react'; import styles from '../example/index.css'; @@ -96,3 +96,22 @@ export const RadioGroupInDialogExample = () => { ); }; + +export const RadioGroupSubmitExample = () => { + return ( +
+ + + Dog + Cat + Dragon + + + + +
+ ); +};