How do I listen to onFocusWithin event for Group component?

[axelthat]

import { Group } from 'react-aria-components'
<Group onFocusWithin={...} />

onFocusWithin event isn't available. Is there an alternative way?

[reidbarber]

You could use useFocusWithin on it.

[axelthat]

@reidbarber Thank you for your reply. I did try doing that but I get a lot of typescript errors.

const MyGroup: FC<GroupProps> = ({...props}) => {
    const { focusWithinProps } = useFocusWithin({})
    return  <Group {...props} {...focusWithinProps} />
}

[axelthat]

Looks like the errors are resolved when the role attribute is omitted from focusWithinProps.

const {
    focusWithinProps: { role, ...focusWithinProps }
} = useFocusWithin({
    onFocusWithinChange: (t) => console.log('Focus Within', t)
})