fix: input state (#254)

tremorlabs · Dec 21, 2022 · 7ac035c · 7ac035c
1 parent d6a9402
commit 7ac035c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/src/components/input-elements/TextInput/TextInput.tsx b/src/components/input-elements/TextInput/TextInput.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import 'tippy.js/dist/tippy.css';
 import Tooltip from '@tippyjs/react';
@@ -45,7 +45,7 @@ export interface TextInputProps {
 
 const TextInput = ({
     name,
-    value = '',
+    value,
     onChange,
     placeholder = 'Type...',
     icon,
@@ -57,13 +57,6 @@ const TextInput = ({
 }: TextInputProps) => {
     const Icon = icon;
 
-    const [inputValue, setInputValue] = useState<string>(value);
-
-    const handleChange = (e: any) => {
-        setInputValue(e.target.value);
-        onChange?.(e);
-    };
-
     const textColor = getTextColor(error, disabled);
     const bgColor = disabled
         ? getColorVariantsFromColorThemeValue(defaultColors.canvasBackground).bgColor
@@ -114,8 +107,8 @@ const TextInput = ({
                     border.none.all,
                     'placeholder:tr-text-gray-500',
                 ) }
-                value={ inputValue }
-                onChange={ handleChange }
+                value={ value }
+                onChange={ onChange }
                 placeholder={ placeholder }
                 disabled={ disabled }
             />

diff --git a/src/stories/input-elements/TextInput.stories.tsx b/src/stories/input-elements/TextInput.stories.tsx
@@ -13,14 +13,22 @@ export default {
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 
 const Template: ComponentStory<typeof TextInput> = (args) => {
-    const [value, setValue] = useState(args.value);
+    const [value, setValue] = useState('');
     return (
         <Card>
-            <form onSubmit={(e) => { alert(value); e.preventDefault(); }}>
-                <TextInput { ...args } name="test" onChange={ (e) => setValue(e.target.value) } />
-                <Button type="submit" text="Submit" />
+            <form onSubmit={(e) => { alert(value); e.preventDefault(); }} onReset={ () => setValue('')}>
+                <Text>Uncontrolled</Text>
+                <TextInput { ...args } />
+                <Text>Default Value</Text>
+                <TextInput { ...args } value={ value } />
+                <Text>Controlled</Text>
+                <label htmlFor="a">Label</label>
+                <TextInput { ...args } id={ 'a' } value={ value } onChange={ (e) => setValue(e.target.value) } />
+                <Button type="submit" text="Submit" marginTop="mt-2" />
+                <Button type="reset" text="Reset Input" marginTop="mt-2" />
             </form>
             <Text>{ value }</Text>
+            {/* <input value={ value } onChange={ (e) => setValue(e.target.value) } /> */}
         </Card>
     );
 };