diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index 63f1e2f6fd..0088badeaa 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/packages/@headlessui-react/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Improve iOS scroll locking ([#1830](https://github.com/tailwindlabs/headlessui/pull/1830)) +- Add `
` check to radio group options in React ([#1835](https://github.com/tailwindlabs/headlessui/pull/1835)) ## [1.7.0] - 2022-09-06 diff --git a/packages/@headlessui-react/src/components/radio-group/radio-group.tsx b/packages/@headlessui-react/src/components/radio-group/radio-group.tsx index c3769e8e8a..c0313f2bcc 100644 --- a/packages/@headlessui-react/src/components/radio-group/radio-group.tsx +++ b/packages/@headlessui-react/src/components/radio-group/radio-group.tsx @@ -8,7 +8,9 @@ import React, { // Types ContextType, ElementType, + FocusEvent as ReactFocusEvent, KeyboardEvent as ReactKeyboardEvent, + MouseEvent as ReactMouseEvent, MutableRefObject, Ref, } from 'react' @@ -30,6 +32,7 @@ import { attemptSubmit, objectToFormEntries } from '../../utils/form' import { getOwnerDocument } from '../../utils/owner' import { useEvent } from '../../hooks/use-event' import { useControllable } from '../../hooks/use-controllable' +import { isDisabledReactIssue7711 } from '../../utils/bugs' interface Option { id: string @@ -385,14 +388,19 @@ let Option = forwardRefWithAs(function Option< [id, registerOption, internalOptionRef, props] ) - let handleClick = useEvent(() => { + let handleClick = useEvent((event: ReactMouseEvent) => { + if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault() if (!change(value)) return addFlag(OptionState.Active) internalOptionRef.current?.focus() }) - let handleFocus = useEvent(() => addFlag(OptionState.Active)) + let handleFocus = useEvent((event: ReactFocusEvent) => { + if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault() + addFlag(OptionState.Active) + }) + let handleBlur = useEvent(() => removeFlag(OptionState.Active)) let isFirstOption = firstOption?.id === id