Skip to content

Commit

Permalink
Add <fieldset disabled> check to radio group options in React (#1835)
Browse files Browse the repository at this point in the history
* wip

* Update changelog
  • Loading branch information
thecrypticace authored Sep 8, 2022
1 parent 397ba5c commit 10f932a
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 2 deletions.
1 change: 1 addition & 0 deletions packages/@headlessui-react/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<fieldset disabled>` check to radio group options in React ([#1835](https://github.com/tailwindlabs/headlessui/pull/1835))

## [1.7.0] - 2022-09-06

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ import React, {
// Types
ContextType,
ElementType,
FocusEvent as ReactFocusEvent,
KeyboardEvent as ReactKeyboardEvent,
MouseEvent as ReactMouseEvent,
MutableRefObject,
Ref,
} from 'react'
Expand All @@ -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<T = unknown> {
id: string
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 10f932a

Please sign in to comment.