From 44954c7fc98e6b853e197ee7237b0d59368ee4fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=A4=E6=9C=88?= <git@yazhou.io>
Date: Thu, 18 Jan 2024 17:26:19 +0800
Subject: [PATCH] fix: Fixed input controlled value (#184)

* fix: fix input controlled value

Signed-off-by: yazhou <yazhouhu@yunify.com>

* chore: update version

Signed-off-by: yazhou <yazhouhu@yunify.com>

---------

Signed-off-by: yazhou <yazhouhu@yunify.com>
---
 .changeset/strange-countries-scream.md        |  5 +++
 packages/components/src/Input/Input.story.tsx | 31 ++++++++++++++++++-
 packages/components/src/Input/Input.tsx       |  2 +-
 3 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/strange-countries-scream.md

diff --git a/.changeset/strange-countries-scream.md b/.changeset/strange-countries-scream.md
new file mode 100644
index 00000000..41f1ca4b
--- /dev/null
+++ b/.changeset/strange-countries-scream.md
@@ -0,0 +1,5 @@
+---
+'@kubed/components': patch
+---
+
+fix: Fixed input controlled value
diff --git a/packages/components/src/Input/Input.story.tsx b/packages/components/src/Input/Input.story.tsx
index b59a5f0d..67e2878b 100644
--- a/packages/components/src/Input/Input.story.tsx
+++ b/packages/components/src/Input/Input.story.tsx
@@ -8,7 +8,36 @@ export default {
   component: Input,
 };
 
-export const Basic = () => <Input placeholder="please input some text" width={360} />;
+export const Basic = () => {
+  return <Input placeholder="please input some text" width={360} onChange={console.log} />;
+};
+
+export const Controlled = () => {
+  const [value, setValue] = React.useState<undefined | string>('');
+
+  return (
+    <div>
+      <Input
+        placeholder="please input some text"
+        width={360}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value.slice(0, 6));
+        }}
+      />
+      <p>
+        <button
+          type="button"
+          onClick={() => {
+            setValue(undefined);
+          }}
+        >
+          clean
+        </button>
+      </p>
+    </div>
+  );
+};
 
 const suffix = (
   <Tooltip content="点击选择容器镜像">
diff --git a/packages/components/src/Input/Input.tsx b/packages/components/src/Input/Input.tsx
index 8b16eb77..427080ad 100644
--- a/packages/components/src/Input/Input.tsx
+++ b/packages/components/src/Input/Input.tsx
@@ -109,7 +109,7 @@ export const Input = forwardRef<InputProps, 'input'>(
             disabled={disabled}
             readOnly={readOnly}
             {...rest}
-            value={fixControlledValue(selfValue)}
+            value={typeof value !== 'undefined' ? value : fixControlledValue(selfValue)}
             onChange={handleChange}
             onFocus={handleFocus}
             onBlur={handleBlur}