input are auto close fix

components/waves/CreateDropContent.tsx

@@ -462,7 +462,9 @@ const CreateDropContent: React.FC<CreateDropContentProps> = ({
   const [editorState, setEditorState] = useState<EditorState | null>(null);
   const [files, setFiles] = useState<File[]>([]);
   const [uploadingFiles, setUploadingFiles] = useState<UploadingFile[]>([]);
-  const [showOptions, setShowOptions] = useState(false);
+  const [userShowOptions, setUserShowOptions] = useState(false);
+  const closeOnNextInputRef = useRef(false);
+  const showOptions = isWideContainer || userShowOptions;
 
   useEffect(() => {
     const container = actionsContainerRef.current;
@@ -474,11 +476,6 @@ const CreateDropContent: React.FC<CreateDropContentProps> = ({
         const width = entry.contentRect.width;
         const isWide = width >= CONTAINER_WIDTH_THRESHOLD;
         setIsWideContainer((prev) => (prev === isWide ? prev : isWide));
-        if (isWide) {
-          setShowOptions(true);
-        } else {
-          setShowOptions(false);
-        }
       }
     });
 
@@ -739,6 +736,8 @@ const CreateDropContent: React.FC<CreateDropContentProps> = ({
     setMentionedUsers([]);
     setReferencedNfts([]);
     setDrop(null);
+    setUserShowOptions(false);
+    closeOnNextInputRef.current = false;
     setDropEditorRefreshKey((prev) => prev + 1);
   };
 
@@ -991,14 +990,46 @@ const CreateDropContent: React.FC<CreateDropContentProps> = ({
     }
 
     setFiles(updatedFiles);
+    if (!isWideContainer) {
+      setUserShowOptions(false);
+      closeOnNextInputRef.current = false;
+    }
   };
 
+  const handleSetShowOptions = useCallback(
+    (next: boolean) => {
+      setUserShowOptions(next);
+      if (isWideContainer) {
+        closeOnNextInputRef.current = false;
+        return;
+      }
+      closeOnNextInputRef.current = next;
+    },
+    [isWideContainer]
+  );
+
   const handleEditorStateChange = useCallback(
     (newEditorState: EditorState) => {
       setEditorState(newEditorState);
-      if (!isWideContainer) {
-        setShowOptions(false);
+      if (!isWideContainer && closeOnNextInputRef.current) {
+        setUserShowOptions(false);
+        closeOnNextInputRef.current = false;
+      }
+    },
+    [isWideContainer]
+  );
+
+  const handleEditorBlur = useCallback(
+    (event: React.FocusEvent<HTMLDivElement>) => {
+      if (isWideContainer) {
+        return;
+      }
+      const nextTarget = event.relatedTarget as Node | null;
+      if (nextTarget && actionsContainerRef.current?.contains(nextTarget)) {
+        return;
       }
+      setUserShowOptions(false);
+      closeOnNextInputRef.current = false;
     },
     [isWideContainer]
   );
@@ -1150,7 +1181,7 @@ const CreateDropContent: React.FC<CreateDropContentProps> = ({
             handleFileChange={handleFileChange}
             onAddMetadataClick={onAddMetadataClick}
             breakIntoStorm={breakIntoStorm}
-            setShowOptions={setShowOptions}
+            setShowOptions={handleSetShowOptions}
             onGifDrop={onGifDrop}
           />
           <div className="tw-w-full tw-flex-grow">
@@ -1165,6 +1196,7 @@ const CreateDropContent: React.FC<CreateDropContentProps> = ({
               isDropMode={isDropMode}
               canSubmit={canSubmit}
               onEditorState={handleEditorStateChange}
+              onEditorBlur={handleEditorBlur}
               onReferencedNft={onReferencedNft}
               onMentionedUser={onMentionedUser}
               onDrop={onDrop}

components/waves/CreateDropInput.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { InitialConfigType } from "@lexical/react/LexicalComposer";
+import type { FocusEvent } from "react";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import {
   forwardRef,
@@ -92,6 +93,7 @@ const CreateDropInput = forwardRef<
     readonly isDropMode: boolean;
     readonly onDrop?: (() => void) | undefined;
     readonly onEditorState: (editorState: EditorState) => void;
+    readonly onEditorBlur?: (event: FocusEvent<HTMLDivElement>) => void;
     readonly onReferencedNft: (referencedNft: ReferencedNft) => void;
     readonly onMentionedUser: (
       mentionedUser: Omit<MentionedUser, "current_handle">
@@ -108,6 +110,7 @@ const CreateDropInput = forwardRef<
       isDropMode,
       submitting,
       onEditorState,
+      onEditorBlur,
       onReferencedNft,
       onMentionedUser,
       onDrop,
@@ -248,6 +251,7 @@ const CreateDropInput = forwardRef<
                           });
                         }
                       }}
+                      onBlur={onEditorBlur}
                       className={`editor-input-one-liner tw-form-input tw-block tw-max-h-[40vh] tw-w-full tw-resize-none tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-py-2.5 tw-pl-3 tw-text-base tw-font-normal tw-leading-6 tw-text-white tw-caret-primary-400 tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-iron-700 tw-transition tw-duration-300 tw-ease-out tw-scrollbar-thin tw-scrollbar-track-iron-900 tw-scrollbar-thumb-iron-600 placeholder:tw-text-iron-500 focus:tw-bg-iron-950 focus:tw-outline-none focus:tw-ring-1 focus:tw-ring-inset focus:tw-ring-primary-400 sm:tw-text-sm ${
                         submitting ? "tw-cursor-default tw-opacity-50" : ""
                       } ${isCapacitor ? "tw-pr-[35px]" : "tw-pr-[40px]"}`}