fix: RadioGroup should not validate on form reset (#8212)

Co-authored-by: Robert Snow <[email protected]>

Author: chirokas

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<AriaRadioGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<RadioGroupRenderProps>, 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<RadioProps>(props),
     // ReactNode type doesn't allow function children.

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 = () => {
     </DialogTrigger>
   );
 };
+
+export const RadioGroupSubmitExample = () => {
+  return (
+    <Form>
+      <RadioGroup
+        className={styles.radiogroup}
+        data-testid="radio-group-example"
+        isRequired>
+        <Label>Favorite pet</Label>
+        <Radio className={styles.radio} value="dogs" data-testid="radio-dog">Dog</Radio>
+        <Radio className={styles.radio} value="cats">Cat</Radio>
+        <Radio className={styles.radio} value="dragon">Dragon</Radio>
+        <FieldError className={styles.errorMessage} />
+      </RadioGroup>
+      <Button type="submit">Submit</Button>
+      <Button type="reset">Reset</Button>
+    </Form>
+  );
+};