feat: add uncontrolled api

razorpay · Apr 10, 2024 · 6c8cada · 6c8cada
1 parent c7428eb
commit 6c8cada
Showing 1 changed file with 23 additions and 8 deletions.
diff --git a/packages/blade/src/components/Input/BaseInput/useTaggedInput.ts b/packages/blade/src/components/Input/BaseInput/useTaggedInput.ts
@@ -36,19 +36,25 @@ const useTaggedInput = ({
 } => {
   const [activeTagIndex, setActiveTagIndex] = React.useState(-1);
   const [inputValueUncontrolled, setInputValueUncontrolled] = React.useState(defaultValue ?? '');
+  const [tagsUncontrolled, setTagsUncontrolled] = React.useState<string[]>([]);
+  const isTagsControlled = Boolean(tags);
 
   const getNewTagsArray = (indexToRemove: number): string[] => {
-    if (!tags) {
+    const currentTags = tags ?? tagsUncontrolled;
+
+    if (!currentTags) {
       return [];
     }
 
     // Check if the index is valid
-    if (indexToRemove < 0 || indexToRemove >= tags.length) {
-      return tags; // Return the original array
+    if (indexToRemove < 0 || indexToRemove >= currentTags.length) {
+      return currentTags; // Return the original array
     }
 
     // Create a new array without the element at the specified index
-    const newArray = tags.slice(0, indexToRemove).concat(tags.slice(indexToRemove + 1));
+    const newArray = currentTags
+      .slice(0, indexToRemove)
+      .concat(currentTags.slice(indexToRemove + 1));
 
     return newArray;
   };
@@ -57,16 +63,19 @@ const useTaggedInput = ({
     () => ({ size }: { size: NonNullable<BaseInputProps['size']> }): React.ReactElement[] => {
       return getTagsGroup({
         size,
-        tags: tags ?? [],
+        tags: tags ?? tagsUncontrolled,
         activeTagIndex,
         isDisabled,
         onDismiss: ({ tagIndex }) => {
+          if (!isTagsControlled) {
+            setTagsUncontrolled(getNewTagsArray(tagIndex));
+          }
           onTagChange?.({ tags: getNewTagsArray(tagIndex) });
         },
       });
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [activeTagIndex, tags, isDisabled],
+    [activeTagIndex, tags, tagsUncontrolled, isDisabled],
   );
 
   const handleTaggedInputChange: FormInputOnEvent = ({ value }) => {
@@ -101,23 +110,29 @@ const useTaggedInput = ({
   };
 
   const handleTaggedInputKeydown = (e: FormInputOnKeyDownEvent): void => {
-    if (!isTaggedInput || !inputValueUncontrolled) {
+    if (!isTaggedInput) {
       return;
     }
 
-    const currentTags = tags ?? [];
+    const currentTags = tags ?? tagsUncontrolled;
     const isControlledValue = Boolean(value);
     const inputValue = isControlledValue ? value?.trim() : inputValueUncontrolled.trim();
     if (e.key === 'Enter' || e.key === ',') {
       e.event.preventDefault(); // we don't want textarea to treat enter as line break in tagged inputs
       if (inputValue) {
+        if (!isTagsControlled) {
+          setTagsUncontrolled([...currentTags, inputValue]);
+        }
         onTagChange?.({ tags: [...currentTags, inputValue] });
         clearInput();
         setActiveTagIndex(-1);
       }
     }
 
     if (e.key === 'Backspace' && !inputValue && activeTagIndex < 0) {
+      if (!isTagsControlled) {
+        setTagsUncontrolled(currentTags.slice(0, -1));
+      }
       onTagChange?.({ tags: currentTags.slice(0, -1) });
     }
   };