Fix: Prevent Checkbox and Radio from unexpectedly calling onBlur when focus moves within the component

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

@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {AriaCheckboxGroupProps, AriaCheckboxProps, HoverEvents, mergeProps, useCheckbox, useCheckboxGroup, useCheckboxGroupItem, useFocusRing, useHover, VisuallyHidden} from 'react-aria';
+import {AriaCheckboxGroupProps, AriaCheckboxProps, HoverEvents, mergeProps, useCheckbox, useCheckboxGroup, useCheckboxGroupItem, useFocusable, useFocusRing, useHover, VisuallyHidden} from 'react-aria';
 import {CheckboxContext} from './RSPContexts';
 import {CheckboxGroupState, useCheckboxGroupState, useToggleState} from 'react-stately';
 import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
@@ -200,10 +200,13 @@ export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ch
     // eslint-disable-next-line react-hooks/rules-of-hooks
     : useCheckbox({
       ...removeDataAttributes(props),
+      onFocus: undefined,
+      onBlur: undefined,
       children: typeof props.children === 'function' ? true : props.children,
       validationBehavior
     // eslint-disable-next-line react-hooks/rules-of-hooks
     }, useToggleState(props), inputRef);
+  let {focusableProps} = useFocusable(props, ref);
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
   let isInteractionDisabled = isDisabled || isReadOnly;
 
@@ -234,8 +237,21 @@ export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ch
 
   return (
     <label
-      {...mergeProps(DOMProps, labelProps, hoverProps, renderProps)}
+      {...mergeProps(DOMProps, labelProps, hoverProps, focusableProps, renderProps)}
       ref={ref}
+      onBlur={(e) => {
+        const nextFocusTarget = e.relatedTarget as Node | null;
+        if (!e.currentTarget.contains(nextFocusTarget)) {
+          props.onBlur?.(e);
+        } 
+      }}
+      onFocus={(e) => {
+        const prevFocusTarget = e.relatedTarget as Node | null;
+        if (!e.currentTarget.contains(prevFocusTarget)) {
+          props.onFocus?.(e);
+        }
+      }}
+      tabIndex={-1}
       slot={props.slot || undefined}
       data-selected={isSelected || undefined}
       data-indeterminate={props.isIndeterminate || undefined}

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

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaRadioGroupProps, AriaRadioProps, HoverEvents, Orientation, useFocusRing, useHover, useRadio, useRadioGroup, VisuallyHidden} from 'react-aria';
+import {AriaRadioGroupProps, AriaRadioProps, HoverEvents, Orientation, useFocusable, useFocusRing, useHover, useRadio, useRadioGroup, VisuallyHidden} from 'react-aria';
 import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps, mergeProps, mergeRefs, useObjectRef} from '@react-aria/utils';
@@ -189,9 +189,12 @@ export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio
   let inputRef = useObjectRef(mergeRefs(userProvidedInputRef, props.inputRef !== undefined ? props.inputRef : null));
   let {labelProps, inputProps, isSelected, isDisabled, isPressed} = useRadio({
     ...removeDataAttributes<RadioProps>(props),
+    onFocus: undefined,
+    onBlur: undefined,
     // ReactNode type doesn't allow function children.
     children: typeof props.children === 'function' ? true : props.children
   }, state, inputRef);
+  let {focusableProps} = useFocusable(props, ref);
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
   let interactionDisabled = isDisabled || state.isReadOnly;
 
@@ -221,8 +224,21 @@ export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio
 
   return (
     <label
-      {...mergeProps(DOMProps, labelProps, hoverProps, renderProps)}
+      {...mergeProps(DOMProps, labelProps, hoverProps, focusableProps, renderProps)}
       ref={ref}
+      onBlur={(e) => {
+        const nextFocusTarget = e.relatedTarget as Node | null;
+        if (!e.currentTarget.contains(nextFocusTarget)) {
+          props.onBlur?.(e);
+        } 
+      }}
+      onFocus={(e) => {
+        const prevFocusTarget = e.relatedTarget as Node | null;
+        if (!e.currentTarget.contains(prevFocusTarget)) {
+          props.onFocus?.(e);
+        }
+      }}
+      tabIndex={-1}
       data-selected={isSelected || undefined}
       data-pressed={isPressed || undefined}
       data-hovered={isHovered || undefined}

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

@@ -244,4 +244,26 @@ describe('Checkbox', () => {
     expect(inputRef.current).toBe(getByRole('checkbox'));
     expect(contextInputRef.current).toBe(getByRole('checkbox'));
   });
+
+  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(onFocus).not.toHaveBeenCalled();
+    expect(onBlur).not.toHaveBeenCalled();
+  });
 });

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

@@ -557,4 +557,61 @@ describe('RadioGroup', () => {
     expect(inputRef.current).toBe(radio);
     expect(contextInputRef.current).toBe(radio);
   });
+
+  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);
+  });
 });