fix(input): added hover and focus to input when label placement is ou…

…tside-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

@@ -0,0 +1,5 @@
+---
+"@nextui-org/input": patch
+---
+
+Fixed hover and focus of input when label placement is outside-left (#2328)

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(

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",