diff --git a/packages/react-aria-components/src/Checkbox.tsx b/packages/react-aria-components/src/Checkbox.tsx index 5b3796f53c2..e20c34ab261 100644 --- a/packages/react-aria-components/src/Checkbox.tsx +++ b/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, useFocusRing, useFocusWithin, 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 {focusWithinProps} = useFocusWithin(props); let {isFocused, isFocusVisible, focusProps} = useFocusRing(); let isInteractionDisabled = isDisabled || isReadOnly; @@ -234,8 +237,21 @@ export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ch return (