fix: clear selection when using form reset in RAC CheckboxGroup (#8316)

Author: yihuiliao

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

@@ -18,7 +18,7 @@ import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {FormContext} from './Form';
 import {forwardRefType, RefObject} from '@react-types/shared';
 import {LabelContext} from './Label';
-import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo} from 'react';
 import {TextContext} from './Text';
 
 export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<CheckboxGroupRenderProps>, SlotProps {}
@@ -185,7 +185,7 @@ export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ch
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
   let groupState = useContext(CheckboxGroupStateContext);
-  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, isReadOnly, isPressed, isInvalid} = groupState
     // eslint-disable-next-line react-hooks/rules-of-hooks
     ? useCheckboxGroupItem({

packages/react-aria-components/stories/CheckboxGroup.stories.tsx

@@ -1,6 +1,7 @@
-import {Checkbox, CheckboxGroup, Label} from 'react-aria-components';
+import {Button, Checkbox, CheckboxGroup, FieldError, Form, Label} from 'react-aria-components';
 import React from 'react';
 import './styles.css';
+import styles from '../example/index.css';
 
 
 export default {
@@ -29,6 +30,37 @@ export const CheckboxGroupExample = () => {
         </div>
         Basketball
       </Checkbox>
+      <FieldError className={styles.errorMessage} />
     </CheckboxGroup>
   );
 };
+
+export const CheckboxGroupSubmitExample = () => {
+  return (
+    <Form>
+      <CheckboxGroup isRequired>
+        <Label>Favorite sports</Label>
+        <Checkbox value="soccer">
+          <div className="checkbox" aria-hidden="true">
+            <svg viewBox="0 0 18 18"><polyline points="1 9 7 14 15 4" /></svg>
+          </div>
+          Soccer
+        </Checkbox>
+        <Checkbox value="baseball">
+          <div className="checkbox" aria-hidden="true">
+            <svg viewBox="0 0 18 18"><polyline points="1 9 7 14 15 4" /></svg>
+          </div>
+          Baseball
+        </Checkbox>
+        <Checkbox value="basketball">
+          <div className="checkbox" aria-hidden="true">
+            <svg viewBox="0 0 18 18"><polyline points="1 9 7 14 15 4" /></svg>
+          </div>
+          Basketball
+        </Checkbox>
+      </CheckboxGroup>
+      <Button type="submit">Submit</Button>
+      <Button type="reset">Reset</Button>
+    </Form>
+  );
+};