Skip to content

Commit 10f932a

Browse files
Add <fieldset disabled> check to radio group options in React (#1835)
* wip * Update changelog
1 parent 397ba5c commit 10f932a

File tree

2 files changed

+11
-2
lines changed

2 files changed

+11
-2
lines changed

packages/@headlessui-react/CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1010
### Fixed
1111

1212
- Improve iOS scroll locking ([#1830](https://github.com/tailwindlabs/headlessui/pull/1830))
13+
- Add `<fieldset disabled>` check to radio group options in React ([#1835](https://github.com/tailwindlabs/headlessui/pull/1835))
1314

1415
## [1.7.0] - 2022-09-06
1516

packages/@headlessui-react/src/components/radio-group/radio-group.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ import React, {
88
// Types
99
ContextType,
1010
ElementType,
11+
FocusEvent as ReactFocusEvent,
1112
KeyboardEvent as ReactKeyboardEvent,
13+
MouseEvent as ReactMouseEvent,
1214
MutableRefObject,
1315
Ref,
1416
} from 'react'
@@ -30,6 +32,7 @@ import { attemptSubmit, objectToFormEntries } from '../../utils/form'
3032
import { getOwnerDocument } from '../../utils/owner'
3133
import { useEvent } from '../../hooks/use-event'
3234
import { useControllable } from '../../hooks/use-controllable'
35+
import { isDisabledReactIssue7711 } from '../../utils/bugs'
3336

3437
interface Option<T = unknown> {
3538
id: string
@@ -385,14 +388,19 @@ let Option = forwardRefWithAs(function Option<
385388
[id, registerOption, internalOptionRef, props]
386389
)
387390

388-
let handleClick = useEvent(() => {
391+
let handleClick = useEvent((event: ReactMouseEvent) => {
392+
if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
389393
if (!change(value)) return
390394

391395
addFlag(OptionState.Active)
392396
internalOptionRef.current?.focus()
393397
})
394398

395-
let handleFocus = useEvent(() => addFlag(OptionState.Active))
399+
let handleFocus = useEvent((event: ReactFocusEvent) => {
400+
if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
401+
addFlag(OptionState.Active)
402+
})
403+
396404
let handleBlur = useEvent(() => removeFlag(OptionState.Active))
397405

398406
let isFirstOption = firstOption?.id === id

0 commit comments

Comments
 (0)