Fix checkbox defaultChecked unexpected changing in form (#2135)

.yarn/versions/a0df87d9.yml

@@ -0,0 +1,5 @@
+releases:
+  "@radix-ui/react-checkbox": patch
+
+declined:
+  - primitives

packages/react/checkbox/src/Checkbox.test.tsx

@@ -120,6 +120,68 @@ describe('given a controlled `checked` Checkbox', () => {
   });
 });
 
+describe('given an uncontrolled Checkbox in form', () => {
+  describe('when clicking the checkbox', () => {
+    it('should receive change event with target `defaultChecked` same as the `defaultChecked` prop of Checkbox', (done) => {
+      const rendered = render(
+        <form
+          onChange={(event) => {
+            const target = event.target as HTMLInputElement;
+            expect(target.defaultChecked).toBe(true);
+          }}
+        >
+          <CheckboxTest defaultChecked />
+        </form>
+      );
+      const checkbox = rendered.getByRole(CHECKBOX_ROLE);
+      fireEvent.click(checkbox);
+      rendered.rerender(
+        <form
+          onChange={(event) => {
+            const target = event.target as HTMLInputElement;
+            expect(target.defaultChecked).toBe(false);
+            done();
+          }}
+        >
+          <CheckboxTest defaultChecked={false} />
+        </form>
+      );
+      fireEvent.click(checkbox);
+    });
+  });
+});
+
+describe('given a controlled Checkbox in a form', () => {
+  describe('when clicking the checkbox', () => {
+    it('should receive change event with target `defaultChecked` same as initial value of `checked` of Checkbox', (done) => {
+      const rendered = render(
+        <form
+          onChange={(event) => {
+            const target = event.target as HTMLInputElement;
+            expect(target.defaultChecked).toBe(true);
+          }}
+        >
+          <CheckboxTest checked />
+        </form>
+      );
+      const checkbox = rendered.getByRole(CHECKBOX_ROLE);
+      fireEvent.click(checkbox);
+      rendered.rerender(
+        <form
+          onChange={(event) => {
+            const target = event.target as HTMLInputElement;
+            expect(target.defaultChecked).toBe(true);
+            done();
+          }}
+        >
+          <CheckboxTest checked={false} />
+        </form>
+      );
+      fireEvent.click(checkbox);
+    });
+  });
+});
+
 function CheckboxTest(props: React.ComponentProps<typeof Checkbox>) {
   const containerRef = React.useRef<HTMLDivElement>(null);
   React.useEffect(() => {

packages/react/checkbox/src/Checkbox.tsx

@@ -19,7 +19,7 @@ const CHECKBOX_NAME = 'Checkbox';
 type ScopedProps<P> = P & { __scopeCheckbox?: Scope };
 const [createCheckboxContext, createCheckboxScope] = createContextScope(CHECKBOX_NAME);
 
-type CheckedState = boolean | 'indeterminate';
+export type CheckedState = boolean | 'indeterminate';
 
 type CheckboxContextValue = {
   state: CheckedState;
@@ -112,6 +112,7 @@ const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(
             // rendered it **after** the button. This pulls it back to sit on top
             // of the button.
             style={{ transform: 'translateX(-100%)' }}
+            defaultChecked={isIndeterminate(defaultChecked) ? false : defaultChecked}
           />
         )}
       </CheckboxProvider>
@@ -167,7 +168,7 @@ interface BubbleInputProps extends Omit<InputProps, 'checked'> {
 }
 
 const BubbleInput = (props: BubbleInputProps) => {
-  const { control, checked, bubbles = true, ...inputProps } = props;
+  const { control, checked, bubbles = true, defaultChecked, ...inputProps } = props;
   const ref = React.useRef<HTMLInputElement>(null);
   const prevChecked = usePrevious(checked);
   const controlSize = useSize(control);
@@ -187,11 +188,12 @@ const BubbleInput = (props: BubbleInputProps) => {
     }
   }, [prevChecked, checked, bubbles]);
 
+  const defaultCheckedRef = React.useRef(isIndeterminate(checked) ? false : checked);
   return (
     <input
       type="checkbox"
       aria-hidden
-      defaultChecked={isIndeterminate(checked) ? false : checked}
+      defaultChecked={defaultChecked ?? defaultCheckedRef.current}
       {...inputProps}
       tabIndex={-1}
       ref={ref}