feat: handle clear button

razorpay · Apr 10, 2024 · d37fd80 · d37fd80
1 parent 6c8cada
commit d37fd80
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 1 deletion.
diff --git a/packages/blade/src/components/Input/BaseInput/useTaggedInput.ts b/packages/blade/src/components/Input/BaseInput/useTaggedInput.ts
@@ -33,6 +33,7 @@ const useTaggedInput = ({
   getTags: ({ size }: { size: NonNullable<BaseInputProps['size']> }) => React.ReactElement[];
   handleTaggedInputKeydown: (e: FormInputOnKeyDownEvent) => void;
   handleTaggedInputChange: FormInputOnEvent;
+  handleTagsClear: () => void;
 } => {
   const [activeTagIndex, setActiveTagIndex] = React.useState(-1);
   const [inputValueUncontrolled, setInputValueUncontrolled] = React.useState(defaultValue ?? '');
@@ -79,9 +80,24 @@ const useTaggedInput = ({
   );
 
   const handleTaggedInputChange: FormInputOnEvent = ({ value }) => {
+    if (!isTaggedInput) {
+      return;
+    }
     setInputValueUncontrolled(value ?? '');
   };
 
+  const handleTagsClear = (): void => {
+    if (!isTaggedInput) {
+      return;
+    }
+
+    if (!isTagsControlled) {
+      setTagsUncontrolled([]);
+    }
+
+    onTagChange?.({ tags: [] });
+  };
+
   const clearInput = (): void => {
     const isControlledValue = Boolean(value);
 
@@ -143,6 +159,7 @@ const useTaggedInput = ({
     getTags,
     handleTaggedInputKeydown,
     handleTaggedInputChange,
+    handleTagsClear,
   };
 };
 

diff --git a/packages/blade/src/components/Input/TextArea/TextArea.tsx b/packages/blade/src/components/Input/TextArea/TextArea.tsx
@@ -134,6 +134,7 @@ const _TextArea: React.ForwardRefRenderFunction<BladeElementRef, TextAreaProps>
     getTags,
     handleTaggedInputKeydown,
     handleTaggedInputChange,
+    handleTagsClear,
   } = useTaggedInput({
     tags,
     onTagChange,
@@ -169,6 +170,7 @@ const _TextArea: React.ForwardRefRenderFunction<BladeElementRef, TextAreaProps>
                   inputRef.current.focus();
                 }
               }
+              handleTagsClear();
               // if the input field is controlled just call the click handler and the value change shall be left upto the consumer
               onClearButtonClick?.();
               inputRef?.current?.focus();

diff --git a/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx b/packages/blade/src/components/Input/TextInput/TextInput.stories.tsx
@@ -590,7 +590,7 @@ export const TextInputWithControlledTags: StoryFn<typeof TextInputComponent> = (
         {...args}
         isTaggedInput={true}
         tags={tags}
-        showClearButton={true}
+        showClearButton={false}
         onTagChange={({ tags }) => {
           setTags(tags);
         }}

diff --git a/packages/blade/src/components/Input/TextInput/TextInput.tsx b/packages/blade/src/components/Input/TextInput/TextInput.tsx
@@ -186,6 +186,7 @@ const _TextInput: React.ForwardRefRenderFunction<BladeElementRef, TextInputProps
     getTags,
     handleTaggedInputKeydown,
     handleTaggedInputChange,
+    handleTagsClear,
   } = useTaggedInput({
     isTaggedInput,
     tags,
@@ -222,6 +223,7 @@ const _TextInput: React.ForwardRefRenderFunction<BladeElementRef, TextInputProps
                 textInputRef.current.focus();
               }
             }
+            handleTagsClear();
             // if the input field is controlled just call the click handler and the value change shall be left upto the consumer
             onClearButtonClick?.();
             textInputRef?.current?.focus();