From ac605eb71f8aa945525a1c659b7bd17037303762 Mon Sep 17 00:00:00 2001
From: Junior Garcia <jrgarciadev@gmail.com>
Date: Mon, 7 Aug 2023 23:31:16 -0300
Subject: [PATCH] Fix/1307 input on value change (#1309)

* fix(input): inner event handler implemented

* chore(root): changeset added
---
 .changeset/gorgeous-taxis-tickle.md        |  5 +++++
 apps/docs/app/examples/perf/page.tsx       |  6 +++---
 packages/components/input/src/use-input.ts | 15 +++++++++++----
 3 files changed, 19 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/gorgeous-taxis-tickle.md

diff --git a/.changeset/gorgeous-taxis-tickle.md b/.changeset/gorgeous-taxis-tickle.md
new file mode 100644
index 000000000..2cad634d0
--- /dev/null
+++ b/.changeset/gorgeous-taxis-tickle.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/input": patch
+---
+
+onValueChange returned value fixed, it nows return a plain string
diff --git a/apps/docs/app/examples/perf/page.tsx b/apps/docs/app/examples/perf/page.tsx
index baae246b0..2ed0b63a6 100644
--- a/apps/docs/app/examples/perf/page.tsx
+++ b/apps/docs/app/examples/perf/page.tsx
@@ -179,9 +179,9 @@ const MyButton2 = extendVariants(Button, {
 });
 
 export default function NextUIPerf() {
-  const [textA, setTextA] = useState<string | undefined>("");
-  const [textB, setTextB] = useState<string | undefined>("");
-  const [textC, setTextC] = useState<string | undefined>("");
+  const [textA, setTextA] = useState<string>("");
+  const [textB, setTextB] = useState<string>("");
+  const [textC, setTextC] = useState<string>("");
 
   return (
     <div className="w-full p-24 gap-4 flex flex-col">
diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts
index e84a3b13e..999fa5d6a 100644
--- a/packages/components/input/src/use-input.ts
+++ b/packages/components/input/src/use-input.ts
@@ -58,7 +58,7 @@ export interface Props<T extends HTMLInputElement | HTMLTextAreaElement = HTMLIn
   /**
    * React aria onChange event.
    */
-  onValueChange?: (value: string | undefined) => void;
+  onValueChange?: (value: string) => void;
 }
 
 export type UseInputProps<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement> =
@@ -86,10 +86,17 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
     ...otherProps
   } = props;
 
+  const handleValueChange = useCallback(
+    (value: string | undefined) => {
+      onValueChange(value ?? "");
+    },
+    [onValueChange],
+  );
+
   const [inputValue, setInputValue] = useControlledState<string | undefined>(
-    props.value,
-    props.defaultValue,
-    onValueChange,
+    props.value ?? undefined,
+    props.defaultValue ?? undefined,
+    handleValueChange,
   );
 
   const Component = as || "div";