fix: input: fixes onchange handler of inputs (#120)

* fix: input: fixes onchange handler of inputs * chore: label: update label button height * chore: input: add missed null check
EightfoldAI · May 16, 2022 · 1076376 · 1076376
1 parent d83e790
commit 1076376
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 21 deletions.
diff --git a/src/components/Inputs/TextArea/TextArea.tsx b/src/components/Inputs/TextArea/TextArea.tsx
@@ -60,7 +60,7 @@ export const TextArea: FC<TextAreaProps> = ({
     const triggerChange = (
         _event?: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
     ) => {
-        onChange;
+        onChange && onChange(_event);
     };
 
     return (

diff --git a/src/components/Inputs/TextInput/TextInput.tsx b/src/components/Inputs/TextInput/TextInput.tsx
@@ -124,7 +124,15 @@ export const TextInput: FC<TextInputProps> = ({
         (
             _event?: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
         ) => {
-            onChange;
+            const { target } = _event;
+
+            onChange && onChange(_event);
+
+            if (target?.value.length === 0 && clearButtonShown) {
+                setClearButtonShown(false);
+            } else if (!clearButtonShown) {
+                setClearButtonShown(true);
+            }
         },
         waitInterval
     );
@@ -142,25 +150,7 @@ export const TextInput: FC<TextInputProps> = ({
                 maxLength={maxlength}
                 minLength={minlength}
                 name={name}
-                onChange={
-                    !allowDisabledFocus
-                        ? (
-                              _event?: React.ChangeEvent<
-                                  HTMLTextAreaElement | HTMLInputElement
-                              >
-                          ) => {
-                              handleChange;
-                              if (
-                                  _event.target.value.length === 0 &&
-                                  clearButtonShown
-                              ) {
-                                  setClearButtonShown(false);
-                              } else if (!clearButtonShown) {
-                                  setClearButtonShown(true);
-                              }
-                          }
-                        : null
-                }
+                onChange={!allowDisabledFocus ? handleChange : null}
                 onBlur={!allowDisabledFocus ? onBlur : null}
                 onFocus={!allowDisabledFocus ? onFocus : null}
                 onKeyDown={!allowDisabledFocus ? onKeyDown : null}

diff --git a/src/components/Label/Label.stories.tsx b/src/components/Label/Label.stories.tsx
@@ -15,6 +15,7 @@ export const Sizes = () => (
                 show: true,
                 toolTipContent: 'A tooltip',
                 toolTipPlacement: 'top',
+                onClick: () => _alertClicked(),
             }}
             size={LabelSize.Large}
             text="Label"
@@ -27,6 +28,7 @@ export const Sizes = () => (
                 show: true,
                 toolTipContent: 'A tooltip',
                 toolTipPlacement: 'top',
+                onClick: () => _alertClicked(),
             }}
             size={LabelSize.Medium}
             text="Label"
@@ -39,6 +41,7 @@ export const Sizes = () => (
                 show: true,
                 toolTipContent: 'A tooltip',
                 toolTipPlacement: 'top',
+                onClick: () => _alertClicked(),
             }}
             size={LabelSize.Small}
             text="Label"

diff --git a/src/components/Label/label.module.scss b/src/components/Label/label.module.scss
@@ -63,6 +63,7 @@
         border-radius: 100%;
         box-sizing: border-box;
         border-width: 1px;
+        height: 16px;
         padding: 0;
 
         &:active,