fix: Improved the user experience of the highlights input form (#1362)

Co-authored-by: Deepak Paul <rudra.ad7@gmail.com>
open-sauced · Jul 18, 2023 · 2425dc4 · 2425dc4
1 parent 36a6216
commit 2425dc4
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/components/molecules/HighlightInput/highlight-input-form.tsx b/components/molecules/HighlightInput/highlight-input-form.tsx
@@ -103,9 +103,20 @@ const HighlightInputForm = ({ refreshCallback }: HighlightInputFormProps): JSX.E
     }
   };
 
+
+  // Handle collapsible change
+  const handleCollapsibleOpenChange = () => {
+    if(isDivFocused && !charCount) {
+      setIsDivFocused(false);
+    } else{
+      setIsDivFocused(true);
+    }
+  };
+
+
   return (
     <form onSubmit={handlePostHighlight} className="flex flex-col flex-1 gap-4">
-      <Collapsible onOpenChange={setIsDivFocused} open={isDivFocused}>
+      <Collapsible onOpenChange={handleCollapsibleOpenChange} open={isDivFocused}>
         <div className="flex flex-col gap-2 p-2 overflow-hidden text-sm bg-white border rounded-lg ">
           <CollapsibleTrigger asChild>
             <div className="flex pr-2">