From 47c329b573b19696b8697ceadc5c3f5a75511c50 Mon Sep 17 00:00:00 2001 From: TheSisb Date: Thu, 18 Jan 2024 09:43:01 -0600 Subject: [PATCH] fix(input): correctly display decrement arrow (#3722) --- .changeset/late-mirrors-rule.md | 6 ++++++ packages/paste-core/components/input/src/Input.tsx | 2 +- .../paste-core/components/input/stories/input.stories.tsx | 4 ++-- 3 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 .changeset/late-mirrors-rule.md diff --git a/.changeset/late-mirrors-rule.md b/.changeset/late-mirrors-rule.md new file mode 100644 index 0000000000..3e58eb73b1 --- /dev/null +++ b/.changeset/late-mirrors-rule.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/input": patch +"@twilio-paste/core": patch +--- + +[Input] Fix rendering logic of decrement arrow on number input diff --git a/packages/paste-core/components/input/src/Input.tsx b/packages/paste-core/components/input/src/Input.tsx index a635bb2745..c8638b73e4 100644 --- a/packages/paste-core/components/input/src/Input.tsx +++ b/packages/paste-core/components/input/src/Input.tsx @@ -245,7 +245,7 @@ const Input = React.forwardRef( const [showDecrement, setShowDecrement] = React.useState(true); // used for number inputs to be able to track uncontrolled number inputs value being changed by a user and it not being tracked by an applications - const [internalValue, setInternalValue] = React.useState(props.defaultValue ? props.defaultValue : "0"); + const [internalValue, setInternalValue] = React.useState(value ?? props.defaultValue ?? "0"); React.useEffect(() => { if (type !== "number") return; diff --git a/packages/paste-core/components/input/stories/input.stories.tsx b/packages/paste-core/components/input/stories/input.stories.tsx index 9bff54d6ba..57b6e2f10c 100644 --- a/packages/paste-core/components/input/stories/input.stories.tsx +++ b/packages/paste-core/components/input/stories/input.stories.tsx @@ -715,8 +715,8 @@ DefaultNumberInput.storyName = "Number Input - Controlled"; export const TestNumberInput = (): React.ReactNode => { const uid = useUID(); - const [value, setValue] = React.useState("0"); - const [minValue, setMinValue] = React.useState("-10"); + const [value, setValue] = React.useState("5"); + const [minValue, setMinValue] = React.useState("0"); const [maxValue, setMaxValue] = React.useState("10"); const [stepValue, setStepValue] = React.useState("1"); return (