Use isFocused instead of isFocusVisible for Input and Textarea components (#2940)
* use `isFocused` in `Input` and `Textarea` We do this because we always want to show the focus ring regardless of whether you used the mouse or the keyboard. * update changelog
This commit is contained in:
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
|
||||
- Expose `disabled` state on `<Tab />` component ([#2918](https://github.com/tailwindlabs/headlessui/pull/2918))
|
||||
- Prevent default behaviour when clicking outside of a `Dialog.Panel` ([#2919](https://github.com/tailwindlabs/headlessui/pull/2919))
|
||||
- Use `isFocused` instead of `isFocusVisible` for `Input` and `Textarea` components ([#2940](https://github.com/tailwindlabs/headlessui/pull/2940))
|
||||
|
||||
## [2.0.0-alpha.4] - 2024-01-03
|
||||
|
||||
|
||||
@@ -1317,10 +1317,7 @@ function InputFn<
|
||||
let labelledBy = useLabelledBy()
|
||||
let describedBy = useDescribedBy()
|
||||
|
||||
let { isFocusVisible: focus, focusProps } = useFocusRing({
|
||||
isTextInput: true,
|
||||
autoFocus: props.autoFocus ?? false,
|
||||
})
|
||||
let { isFocused: focus, focusProps } = useFocusRing({ autoFocus: props.autoFocus ?? false })
|
||||
let { isHovered: hover, hoverProps } = useHover({ isDisabled: data.disabled ?? false })
|
||||
|
||||
let slot = useMemo(
|
||||
@@ -1479,10 +1476,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
|
||||
|
||||
let labelledBy = useLabelledBy([id])
|
||||
|
||||
let { isFocusVisible: focus, focusProps } = useFocusRing({
|
||||
isTextInput: true,
|
||||
autoFocus: props.autoFocus ?? false,
|
||||
})
|
||||
let { isFocusVisible: focus, focusProps } = useFocusRing({ autoFocus: props.autoFocus ?? false })
|
||||
let { isHovered: hover, hoverProps } = useHover({ isDisabled: data.disabled ?? false })
|
||||
let { pressed: active, pressProps } = useActivePress({ disabled: data.disabled ?? false })
|
||||
|
||||
|
||||
@@ -56,8 +56,7 @@ function InputFn<TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(
|
||||
let labelledBy = useLabelledBy()
|
||||
let describedBy = useDescribedBy()
|
||||
|
||||
let { isFocusVisible: focus, focusProps } = useFocusRing({
|
||||
isTextInput: true,
|
||||
let { isFocused: focus, focusProps } = useFocusRing({
|
||||
autoFocus: props.autoFocus ?? false,
|
||||
})
|
||||
let { isHovered: hover, hoverProps } = useHover({ isDisabled: disabled ?? false })
|
||||
|
||||
@@ -56,7 +56,7 @@ function TextareaFn<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG>(
|
||||
let labelledBy = useLabelledBy()
|
||||
let describedBy = useDescribedBy()
|
||||
|
||||
let { isFocusVisible: focus, focusProps } = useFocusRing({ autoFocus: props.autoFocus ?? false })
|
||||
let { isFocused: focus, focusProps } = useFocusRing({ autoFocus: props.autoFocus ?? false })
|
||||
let { isHovered: hover, hoverProps } = useHover({ isDisabled: disabled ?? false })
|
||||
|
||||
let ourProps = mergeProps(
|
||||
|
||||
Reference in New Issue
Block a user