Support for focus events in useRadioGroup hooks (#5441)

* Add onBlur event handling to useRadioGroup hook

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

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

* refac: user user action instead of act

* feat: support focus events

---------

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

Author: 3 people

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

@@ -64,11 +64,14 @@ export function useRadioGroup(props: AriaRadioGroupProps, state: RadioGroupState
   // there is no selection. This allows tabbing into the group from either
   // direction to go to the first or last radio.
   let {focusWithinProps} = useFocusWithin({
-    onBlurWithin() {
+    onBlurWithin(e) {
+      props.onBlur?.(e);
       if (!state.selectedValue) {
         state.setLastFocusedValue(null);
       }
-    }
+    },
+    onFocusWithin: props.onFocus,
+    onFocusWithinChange: props.onFocusChange
   });
 
   let onKeyDown = (e) => {

packages/@react-types/radio/src/index.d.ts

@@ -15,6 +15,7 @@ import {
   AriaValidationProps,
   DOMProps,
   FocusableProps,
+  FocusEvents,
   HelpTextProps,
   InputBase,
   InputDOMProps,
@@ -28,7 +29,7 @@ import {
 } from '@react-types/shared';
 import {ReactElement, ReactNode} from 'react';
 
-export interface RadioGroupProps extends ValueBase<string>, InputBase, InputDOMProps, Validation<string | null>, LabelableProps, HelpTextProps {
+export interface RadioGroupProps extends ValueBase<string>, InputBase, InputDOMProps, Validation<string | null>, LabelableProps, HelpTextProps, FocusEvents {
   /**
    * The axis the Radio Button(s) should align with.
    * @default 'vertical'

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

@@ -453,6 +453,31 @@ describe('RadioGroup', () => {
     expect(group).not.toHaveAttribute('data-invalid');
   });
 
+  it('should support focus events', async () => {
+    let onBlur = jest.fn();
+    let onFocus = jest.fn();
+    let onFocusChange = jest.fn();
+
+    let {getAllByRole} = renderGroup({onBlur, onFocus, onFocusChange});
+    let radio = getAllByRole('radio')[0];
+
+    await user.tab();
+    expect(document.activeElement).toBe(radio);
+    expect(onBlur).toHaveBeenCalledTimes(0);
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(onFocusChange).toHaveBeenCalledTimes(1);
+
+    await user.keyboard('[ArrowRight]');
+    expect(onBlur).toHaveBeenCalledTimes(0);
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(onFocusChange).toHaveBeenCalledTimes(1);
+
+    await user.tab();
+    expect(onBlur).toHaveBeenCalledTimes(1);
+    expect(onFocus).toHaveBeenCalledTimes(1);
+    expect(onFocusChange).toHaveBeenCalledTimes(2);
+  });
+
   it('should support refs', () => {
     let groupRef = React.createRef();
     let radioRef = React.createRef();