fix(components): number input label #2268 fixed (#2274)

* fix(components): number input label #2268 fixed * fix(component): comments resolved * fix(component): format with prettier --------- Co-authored-by: Prakash Choudhary <[email protected]>
heroui-inc · Feb 22, 2024 · e6f3628 · e6f3628
1 parent f75174d
commit e6f3628
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/.changeset/polite-ravens-hide.md b/.changeset/polite-ravens-hide.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/input": patch
+---
+
+Fix #2268, when using a number input and with a 0 for the initial value, the label (default or labelPlacement='inside') does not animate to the correct position. Even when the user is setting the value to 0, the label does not alter its state unless a number other than 0 is inputted.
diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts
@@ -6,7 +6,7 @@ import {useFocusRing} from "@react-aria/focus";
 import {input} from "@nextui-org/theme";
 import {useDOMRef, filterDOMProps} from "@nextui-org/react-utils";
 import {useFocusWithin, useHover, usePress} from "@react-aria/interactions";
-import {clsx, dataAttr, safeAriaLabel} from "@nextui-org/shared-utils";
+import {clsx, dataAttr, isEmpty, safeAriaLabel} from "@nextui-org/shared-utils";
 import {useControlledState} from "@react-stately/utils";
 import {useMemo, Ref, useCallback, useState} from "react";
 import {chain, mergeProps} from "@react-aria/utils";
@@ -124,7 +124,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
   const Component = as || "div";
 
   const isFilledByDefault = ["date", "time", "month", "week", "range"].includes(type!);
-  const isFilled = !!inputValue || isFilledByDefault;
+  const isFilled = !isEmpty(inputValue) || isFilledByDefault;
   const isFilledWithin = isFilled || isFocusWithin;
   const baseStyles = clsx(classNames?.base, className, isFilled ? "is-filled" : "");
   const isMultiline = originalProps.isMultiline;
@@ -289,7 +289,9 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
         "data-filled-within": dataAttr(isFilledWithin),
         "data-has-start-content": dataAttr(hasStartContent),
         "data-has-end-content": dataAttr(!!endContent),
-        className: slots.input({class: clsx(classNames?.input, !!inputValue ? "is-filled" : "")}),
+        className: slots.input({
+          class: clsx(classNames?.input, isFilled ? "is-filled" : ""),
+        }),
         ...mergeProps(
           focusProps,
           inputProps,
@@ -332,7 +334,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
         "data-focus-visible": dataAttr(isFocusVisible),
         "data-focus": dataAttr(isFocused),
         className: slots.inputWrapper({
-          class: clsx(classNames?.inputWrapper, !!inputValue ? "is-filled" : ""),
+          class: clsx(classNames?.inputWrapper, isFilled ? "is-filled" : ""),
         }),
         ...mergeProps(props, hoverProps),
         onClick: (e) => {