fix: Extra Checkbox and Radio focus events (#8567)

* fix: Extra Checkbox and Radio focus events

* add RAC story actions

* add use checkbox example with independent label and input

* add code comments

Author: snowystinger

packages/@react-aria/checkbox/docs/useCheckbox.mdx

@@ -85,10 +85,10 @@ function Checkbox(props) {
   let {children} = props;
   let state = useToggleState(props);
   let ref = React.useRef(null);
-  let {inputProps} = useCheckbox(props, state, ref);
+  let {inputProps, labelProps} = useCheckbox(props, state, ref);
 
   return (
-    <label style={{display: 'block'}}>
+    <label {...labelProps} style={{display: 'block'}}>
       <input {...inputProps} ref={ref} />
       {children}
     </label>
@@ -120,12 +120,12 @@ import {mergeProps} from '@react-aria/utils';
 function Checkbox(props) {
   let state = useToggleState(props);
   let ref = React.useRef(null);
-  let {inputProps} = useCheckbox(props, state, ref);
+  let {inputProps, labelProps} = useCheckbox(props, state, ref);
   let {isFocusVisible, focusProps} = useFocusRing();
   let isSelected = state.isSelected && !props.isIndeterminate;
 
   return (
-    <label style={{display: 'flex', alignItems: 'center', opacity: props.isDisabled ? 0.4 : 1}}>
+    <label {...labelProps} style={{display: 'flex', alignItems: 'center', opacity: props.isDisabled ? 0.4 : 1}}>
       <VisuallyHidden>
         <input {...mergeProps(inputProps, focusProps)} ref={ref} />
       </VisuallyHidden>

packages/@react-aria/checkbox/docs/useCheckboxGroup.mdx

@@ -127,13 +127,14 @@ function Checkbox(props) {
   let {children} = props;
   let state = React.useContext(CheckboxGroupContext);
   let ref = React.useRef(null);
-  let {inputProps} = useCheckboxGroupItem(props, state, ref);
+  let {inputProps, labelProps} = useCheckboxGroupItem(props, state, ref);
 
   let isDisabled = state.isDisabled || props.isDisabled;
   let isSelected = state.isSelected(props.value);
 
   return (
     <label
+      {...labelProps}
       style={{
         display: 'block',
         color: (isDisabled && 'var(--gray)') || (isSelected && 'var(--blue)'),

packages/@react-aria/checkbox/src/useCheckbox.ts

@@ -11,7 +11,7 @@
  */
 
 import {AriaCheckboxProps} from '@react-types/checkbox';
-import {InputHTMLAttributes, LabelHTMLAttributes, useEffect} from 'react';
+import {InputHTMLAttributes, LabelHTMLAttributes, useEffect, useMemo} from 'react';
 import {mergeProps} from '@react-aria/utils';
 import {privateValidationStateProp, useFormValidationState} from '@react-stately/form';
 import {RefObject, ValidationResult} from '@react-types/shared';
@@ -69,17 +69,24 @@ export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputR
     onPress() {
       // @ts-expect-error
       let {[privateValidationStateProp]: groupValidationState} = props;
-  
+
       let {commitValidation} = groupValidationState
       ? groupValidationState
       : validationState;
-      
+
       commitValidation();
     }
   });
 
   return {
-    labelProps: mergeProps(labelProps, pressProps),
+    labelProps: mergeProps(
+      labelProps,
+      pressProps,
+      useMemo(() => ({
+        // Prevent label from being focused when mouse down on it.
+        // Note, this does not prevent the input from being focused in the `click` event.
+        onMouseDown: e => e.preventDefault()
+      }), [])),
     inputProps: {
       ...inputProps,
       checked: isSelected,

packages/@react-aria/checkbox/stories/useCheckbox.stories.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {action} from '@storybook/addon-actions';
+import {AriaCheckboxProps, useCheckbox} from '../';
+import React from 'react';
+import {StoryObj} from '@storybook/react';
+import {useToggleState} from '@react-stately/toggle';
+
+export default {
+  title: 'useCheckbox'
+};
+
+export type CheckboxStory = StoryObj<typeof Checkbox>;
+
+function Checkbox(props: AriaCheckboxProps) {
+  let {children} = props;
+  let state = useToggleState(props);
+  let ref = React.useRef(null);
+  let {inputProps, labelProps} = useCheckbox(props, state, ref);
+
+  return (
+    <>
+      <label {...labelProps} style={{display: 'block'}}>
+        {children}
+      </label>
+      <input {...inputProps} ref={ref} />
+    </>
+  );
+}
+
+export const Example: CheckboxStory = {
+  render: (args) => <Checkbox {...args}>Unsubscribe</Checkbox>,
+  args: {
+    onFocus: action('onFocus'),
+    onBlur: action('onBlur')
+  }
+};

packages/@react-aria/radio/src/useRadio.ts

@@ -12,7 +12,7 @@
 
 import {AriaRadioProps} from '@react-types/radio';
 import {filterDOMProps, mergeProps, useFormReset} from '@react-aria/utils';
-import {InputHTMLAttributes, LabelHTMLAttributes} from 'react';
+import {InputHTMLAttributes, LabelHTMLAttributes, useMemo} from 'react';
 import {radioGroupData} from './utils';
 import {RadioGroupState} from '@react-stately/radio';
 import {RefObject} from '@react-types/shared';
@@ -116,7 +116,15 @@ export function useRadio(props: AriaRadioProps, state: RadioGroupState, ref: Ref
   useFormValidation({validationBehavior}, state, ref);
 
   return {
-    labelProps: mergeProps(labelProps, {onClick: e => e.preventDefault()}),
+    labelProps: mergeProps(
+      labelProps,
+      useMemo(() => ({
+        onClick: e => e.preventDefault(),
+
+        // Prevent label from being focused when mouse down on it.
+        // Note, this does not prevent the input from being focused in the `click` event.
+        onMouseDown: e => e.preventDefault()
+      }), [])),
     inputProps: mergeProps(domProps, {
       ...interactions,
       type: 'radio',

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

@@ -1,3 +1,4 @@
+import {action} from '@storybook/addon-actions';
 import {Checkbox} from 'react-aria-components';
 import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
@@ -6,14 +7,18 @@ import './styles.css';
 
 export default {
   title: 'React Aria Components/Checkbox',
-  component: Checkbox
+  component: Checkbox,
+  args: {
+    onFocus: action('onFocus'),
+    onBlur: action('onBlur')
+  }
 } as Meta<typeof Checkbox>;
 
 export type CheckboxStory = StoryObj<typeof Checkbox>;
 
 export const CheckboxExample: CheckboxStory = {
-  render: () => (
-    <Checkbox>
+  render: (args) => (
+    <Checkbox {...args}>
       <div className="checkbox">
         <svg viewBox="0 0 18 18" aria-hidden="true">
           <polyline points="1 9 7 14 15 4" />

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

@@ -10,8 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
+import {action} from '@storybook/addon-actions';
 import {Button, Dialog, DialogTrigger, FieldError, Form, Label, Modal, ModalOverlay, Radio, RadioGroup} from 'react-aria-components';
-import {Meta, StoryFn} from '@storybook/react';
+import {Meta, StoryFn, StoryObj} from '@storybook/react';
 import React, {useState} from 'react';
 import styles from '../example/index.css';
 import './styles.css';
@@ -22,25 +23,34 @@ export default {
 } as Meta<typeof RadioGroup>;
 
 export type RadioGroupStory = StoryFn<typeof RadioGroup>;
+export type RadioGroupStoryObj = StoryObj<typeof RadioGroup>;
 
-export const RadioGroupExample: RadioGroupStory = () => {
-  return (
-    <RadioGroup
-      data-testid="radio-group-example"
-      className={styles.radiogroup}>
-      <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>
-    </RadioGroup>
-  );
+export const RadioGroupExample: RadioGroupStoryObj = {
+  render: (props) => {
+    return (
+      <RadioGroup
+        {...props}
+        data-testid="radio-group-example"
+        className={styles.radiogroup}>
+        <Label>Favorite pet</Label>
+        <Radio onFocus={action('radio focus')} onBlur={action('radio blur')} className={styles.radio} value="dogs" data-testid="radio-dog">Dog</Radio>
+        <Radio onFocus={action('radio focus')} onBlur={action('radio blur')} className={styles.radio} value="cats">Cat</Radio>
+        <Radio onFocus={action('radio focus')} onBlur={action('radio blur')} className={styles.radio} value="dragon">Dragon</Radio>
+      </RadioGroup>
+    );
+  },
+  args: {
+    onFocus: action('onFocus'),
+    onBlur: action('onBlur')
+  }
 };
 
-export const RadioGroupControlledExample: RadioGroupStory = () => {
+export const RadioGroupControlledExample: RadioGroupStory = (props) => {
   let [selected, setSelected] = useState<string|null>(null);
 
   return (
     <RadioGroup
+      {...props}
       data-testid="radio-group-example"
       className={styles.radiogroup}
       value={selected}
@@ -53,7 +63,7 @@ export const RadioGroupControlledExample: RadioGroupStory = () => {
   );
 };
 
-export const RadioGroupInDialogExample: RadioGroupStory = () => {
+export const RadioGroupInDialogExample: RadioGroupStory = (props) => {
   return (
     <DialogTrigger>
       <Button>Open dialog</Button>
@@ -88,6 +98,7 @@ export const RadioGroupInDialogExample: RadioGroupStory = () => {
                 <div style={{display: 'flex', flexDirection: 'row', gap: 20}}>
                   <div>
                     <RadioGroup
+                      {...props}
                       data-testid="radio-group-example"
                       className={styles.radiogroup}>
                       <Label>Favorite pet</Label>
@@ -142,10 +153,11 @@ export const RadioGroupInDialogExample: RadioGroupStory = () => {
   );
 };
 
-export const RadioGroupSubmitExample: RadioGroupStory = () => {
+export const RadioGroupSubmitExample: RadioGroupStory = (props) => {
   return (
     <Form>
       <RadioGroup
+        {...props}
         className={styles.radiogroup}
         data-testid="radio-group-example"
         isRequired>

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

@@ -277,4 +277,27 @@ describe('Checkbox', () => {
     let checkbox = getByRole('checkbox');
     expect(checkbox).toHaveAttribute('form', 'test');
   });
+
+
+  it('should not trigger onBlur/onFocus on sequential presses', async () => {
+    let onBlur = jest.fn();
+    let onFocus = jest.fn();
+    let {getByRole} = render(
+      <Checkbox onFocus={onFocus} onBlur={onBlur}>Test</Checkbox>
+    );
+
+    let checkbox = getByRole('checkbox');
+    let label = checkbox.closest('label');
+
+    await user.click(label);
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(onBlur).not.toHaveBeenCalled();
+
+    onFocus.mockClear();
+
+    await user.click(label);
+
+    expect(onBlur).not.toHaveBeenCalled();
+    expect(onFocus).not.toHaveBeenCalled();
+  });
 });

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

@@ -607,11 +607,68 @@ describe('RadioGroup', () => {
     await user.keyboard('[ArrowLeft]');
     expect(document.activeElement).toBe(radios[0]);
   });
-  
+
   it('should support form prop', () => {
     let {getAllByRole} = renderGroup({form: 'test'});
     for (let radio of getAllByRole('radio')) {
       expect(radio).toHaveAttribute('form', 'test');
     }
   });
+
+  it('should not trigger onBlur/onFocus on sequential presses of a Radio', async () => {
+    let onBlur = jest.fn();
+    let onFocus = jest.fn();
+
+    let {getAllByRole} = render(
+      <RadioGroup>
+        <Label>Test</Label>
+        <Radio value="a" onFocus={onFocus} onBlur={onBlur}>A</Radio>
+        <Radio value="b">B</Radio>
+      </RadioGroup>
+    );
+
+    let radios = getAllByRole('radio');
+    let radio = radios[0];
+    let label = radio.closest('label');
+
+    await user.click(label);
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(onBlur).not.toHaveBeenCalled();
+
+    onFocus.mockClear();
+
+    await user.click(label);
+
+    expect(onFocus).not.toHaveBeenCalled();
+    expect(onBlur).not.toHaveBeenCalled();
+  });
+
+  it('should trigger onBlur when moving focus between different Radio buttons', async () => {
+    let onBlurA = jest.fn();
+    let onFocusA = jest.fn();
+    let onBlurB = jest.fn();
+    let onFocusB = jest.fn();
+
+    let {getAllByRole} = render(
+      <RadioGroup>
+        <Label>Test</Label>
+        <Radio value="a" onFocus={onFocusA} onBlur={onBlurA}>A</Radio>
+        <Radio value="b" onFocus={onFocusB} onBlur={onBlurB}>B</Radio>
+      </RadioGroup>
+    );
+
+    let radios = getAllByRole('radio');
+    let radioA = radios[0];
+    let radioB = radios[1];
+    let labelA = radioA.closest('label');
+    let labelB = radioB.closest('label');
+
+    await user.click(labelA);
+    expect(onFocusA).toHaveBeenCalledTimes(1);
+    expect(onBlurA).not.toHaveBeenCalled();
+
+    await user.click(labelB);
+    expect(onFocusB).toHaveBeenCalledTimes(1);
+    expect(onBlurA).toHaveBeenCalledTimes(1);
+  });
 });