archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* fix(components): number input label #2268 fixed

* fix(component): comments resolved

* fix(component): format with prettier

---------

Co-authored-by: Prakash Choudhary <prakashchoudhary@Prakashs-iMac.local>
This commit is contained in:
Prakash Choudhary 2024-02-22 09:42:44 +05:30 committed by GitHub
parent f75174d07e
commit e6f36281cb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/polite-ravens-hide.md Normal file
View File

@ -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.

10
packages/components/input/src/use-input.ts
View File

@ -6,7 +6,7 @@ import {useFocusRing} from "@react-aria/focus";
import {input} from "@nextui-org/theme"; import {input} from "@nextui-org/theme";
import {useDOMRef, filterDOMProps} from "@nextui-org/react-utils"; import {useDOMRef, filterDOMProps} from "@nextui-org/react-utils";
import {useFocusWithin, useHover, usePress} from "@react-aria/interactions"; 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 {useControlledState} from "@react-stately/utils";
import {useMemo, Ref, useCallback, useState} from "react"; import {useMemo, Ref, useCallback, useState} from "react";
import {chain, mergeProps} from "@react-aria/utils"; import {chain, mergeProps} from "@react-aria/utils";
@ -124,7 +124,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
const Component = as || "div"; const Component = as || "div";
const isFilledByDefault = ["date", "time", "month", "week", "range"].includes(type!); const isFilledByDefault = ["date", "time", "month", "week", "range"].includes(type!);
const isFilled = !!inputValue || isFilledByDefault; const isFilled = !isEmpty(inputValue) || isFilledByDefault;
const isFilledWithin = isFilled || isFocusWithin; const isFilledWithin = isFilled || isFocusWithin;
const baseStyles = clsx(classNames?.base, className, isFilled ? "is-filled" : ""); const baseStyles = clsx(classNames?.base, className, isFilled ? "is-filled" : "");
const isMultiline = originalProps.isMultiline; const isMultiline = originalProps.isMultiline;
@ -289,7 +289,9 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
"data-filled-within": dataAttr(isFilledWithin), "data-filled-within": dataAttr(isFilledWithin),
"data-has-start-content": dataAttr(hasStartContent), "data-has-start-content": dataAttr(hasStartContent),
"data-has-end-content": dataAttr(!!endContent), "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( ...mergeProps(
focusProps, focusProps,
inputProps, inputProps,
@ -332,7 +334,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
"data-focus-visible": dataAttr(isFocusVisible), "data-focus-visible": dataAttr(isFocusVisible),
"data-focus": dataAttr(isFocused), "data-focus": dataAttr(isFocused),
className: slots.inputWrapper({ className: slots.inputWrapper({
class: clsx(classNames?.inputWrapper, !!inputValue ? "is-filled" : ""), class: clsx(classNames?.inputWrapper, isFilled ? "is-filled" : ""),
}), }),
...mergeProps(props, hoverProps), ...mergeProps(props, hoverProps),
onClick: (e) => { onClick: (e) => {