From f2bc6fdd4021969fb0ddeada980d5996fc106790 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Tue, 23 Jan 2024 12:13:55 +0100
Subject: [PATCH] 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
---
 packages/@headlessui-react/CHANGELOG.md                |  1 +
 .../src/components/combobox/combobox.tsx               | 10 ++--------
 .../@headlessui-react/src/components/input/input.tsx   |  3 +--
 .../src/components/textarea/textarea.tsx               |  2 +-
 4 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 1d6356870..f98abbff1 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -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
 
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
index a788bc79d..8bfd8a7fc 100644
--- 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
index f42634e0c..27b0d6806 100644
--- 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
index 13ac8b016..9091f8d75 100644
--- 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(