From 985c2e1dd3642e3087aa0555a3c3ae4ea182b099 Mon Sep 17 00:00:00 2001
From: Shrinidhi Upadhyaya <shrinidhiupadhyaya1195@gmail.com>
Date: Sat, 7 Sep 2024 12:21:31 +0200
Subject: [PATCH] fix(input): added hover and focus to input when label
 placement is outside-left #2328 (#2958)

* fix(range-calendar): hide only dates outside the month #2890

* fix(range-calendar): corrected spelling mistake in changeset description

* fix(range-calendar): corrected capitalization in changeset description

* fix(input): added hover and focus to input when label placement is outside-left #2328

* fix(input): label props mergeProps precedence change

---------

Co-authored-by: shrinidhi.upadhyaya <shrinidhi.upadhyaya@stud.uni-bamberg.de>
---
 .changeset/lucky-schools-travel.md          |  5 +++++
 packages/components/input/src/use-input.ts  | 24 +++++++++++++++------
 packages/core/theme/src/components/input.ts |  2 +-
 3 files changed, 24 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/lucky-schools-travel.md

diff --git a/.changeset/lucky-schools-travel.md b/.changeset/lucky-schools-travel.md
new file mode 100644
index 0000000000..b736c9c07e
--- /dev/null
+++ b/.changeset/lucky-schools-travel.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/input": patch
+---
+
+Fixed hover and focus of input when label placement is outside-left (#2328)
diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts
index 8e43f26b03..256c75b8ec 100644
--- a/packages/components/input/src/use-input.ts
+++ b/packages/components/input/src/use-input.ts
@@ -208,6 +208,10 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
 
   const {isHovered, hoverProps} = useHover({isDisabled: !!originalProps?.isDisabled});
 
+  const {isHovered: isLabelHovered, hoverProps: labelHoverProps} = useHover({
+    isDisabled: !!originalProps?.isDisabled,
+  });
+
   const {focusProps: clearFocusProps, isFocusVisible: isClearButtonFocusVisible} = useFocusRing();
 
   const {focusWithinProps} = useFocusWithin({
@@ -307,7 +311,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
         "data-focus-visible": dataAttr(isFocusVisible),
         "data-readonly": dataAttr(originalProps.isReadOnly),
         "data-focus": dataAttr(isFocused),
-        "data-hover": dataAttr(isHovered),
+        "data-hover": dataAttr(isHovered || isLabelHovered),
         "data-required": dataAttr(originalProps.isRequired),
         "data-invalid": dataAttr(isInvalid),
         "data-disabled": dataAttr(originalProps.isDisabled),
@@ -326,6 +330,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
       isFilled,
       isFocused,
       isHovered,
+      isLabelHovered,
       isInvalid,
       hasHelper,
       hasLabel,
@@ -349,11 +354,10 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
       return {
         "data-slot": "label",
         className: slots.label({class: classNames?.label}),
-        ...labelProps,
-        ...props,
+        ...mergeProps(labelProps, labelHoverProps, props),
       };
     },
-    [slots, labelProps, classNames?.label],
+    [slots, isLabelHovered, labelProps, classNames?.label],
   );
 
   const getInputProps: PropGetter = useCallback(
@@ -404,7 +408,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
       return {
         ref: inputWrapperRef,
         "data-slot": "input-wrapper",
-        "data-hover": dataAttr(isHovered),
+        "data-hover": dataAttr(isHovered || isLabelHovered),
         "data-focus-visible": dataAttr(isFocusVisible),
         "data-focus": dataAttr(isFocused),
         className: slots.inputWrapper({
@@ -422,7 +426,15 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
         },
       };
     },
-    [slots, isHovered, isFocusVisible, isFocused, inputValue, classNames?.inputWrapper],
+    [
+      slots,
+      isHovered,
+      isLabelHovered,
+      isFocusVisible,
+      isFocused,
+      inputValue,
+      classNames?.inputWrapper,
+    ],
   );
 
   const getInnerWrapperProps: PropGetter = useCallback(
diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts
index 226b7bd571..d1cacd3740 100644
--- a/packages/core/theme/src/components/input.ts
+++ b/packages/core/theme/src/components/input.ts
@@ -174,7 +174,7 @@ const input = tv({
         base: "flex-row items-center flex-nowrap data-[has-helper=true]:items-start",
         inputWrapper: "flex-1",
         mainWrapper: "flex flex-col",
-        label: "relative text-foreground pr-2 rtl:pr-0 rtl:pl-2",
+        label: "relative text-foreground pr-2 rtl:pr-0 rtl:pl-2 pointer-events-auto",
       },
       inside: {
         label: "text-tiny cursor-text",