Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wingkwong merged 6 commits into from
Sep 7, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4cc7ed4
fix(range-calendar): hide only dates outside the month #2890
Apr 28, 2024
1b21374
fix(range-calendar): corrected spelling mistake in changeset description
Apr 28, 2024
29ef6e4
fix(range-calendar): corrected capitalization in changeset description
Apr 28, 2024
1194176
fix(input): added hover and focus to input when label placement is ou…
May 6, 2024
0b9d691
Merge branch 'fix/input-focus' into fix/input
May 6, 2024
45bdab4
fix(input): label props mergeProps precedence change
May 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/lucky-schools-travel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@nextui-org/input": patch
---

Fixed hover and focus of input when label placement is outside-left (#2328)
24 changes: 18 additions & 6 deletions packages/components/input/src/use-input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,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({
Expand Down Expand Up @@ -259,7 +263,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),
Expand All @@ -277,6 +281,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
isFilled,
isFocused,
isHovered,
isLabelHovered,
isInvalid,
hasHelper,
hasLabel,
Expand All @@ -299,11 +304,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(
Expand Down Expand Up @@ -356,7 +360,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({
Expand All @@ -374,7 +378,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(
Expand Down
2 changes: 1 addition & 1 deletion packages/core/theme/src/components/input.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,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",
Expand Down