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.
tailwindlabs · Jan 23, 2024 · c543408 · c543408
1 parent aff438e
commit c543408
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 11 deletions.
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -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 })
 

diff --git a/packages/@headlessui-react/src/components/input/input.tsx b/packages/@headlessui-react/src/components/input/input.tsx
@@ -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 })

diff --git a/packages/@headlessui-react/src/components/textarea/textarea.tsx b/packages/@headlessui-react/src/components/textarea/textarea.tsx
@@ -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(