diff --git a/components/waves/CreateDropContent.tsx b/components/waves/CreateDropContent.tsx index b5f935cd68..68efbcda7f 100644 --- a/components/waves/CreateDropContent.tsx +++ b/components/waves/CreateDropContent.tsx @@ -462,7 +462,9 @@ const CreateDropContent: React.FC = ({ const [editorState, setEditorState] = useState(null); const [files, setFiles] = useState([]); const [uploadingFiles, setUploadingFiles] = useState([]); - 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 = ({ 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 = ({ setMentionedUsers([]); setReferencedNfts([]); setDrop(null); + setUserShowOptions(false); + closeOnNextInputRef.current = false; setDropEditorRefreshKey((prev) => prev + 1); }; @@ -991,14 +990,46 @@ const CreateDropContent: React.FC = ({ } 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) => { + 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 = ({ handleFileChange={handleFileChange} onAddMetadataClick={onAddMetadataClick} breakIntoStorm={breakIntoStorm} - setShowOptions={setShowOptions} + setShowOptions={handleSetShowOptions} onGifDrop={onGifDrop} />
@@ -1165,6 +1196,7 @@ const CreateDropContent: React.FC = ({ isDropMode={isDropMode} canSubmit={canSubmit} onEditorState={handleEditorStateChange} + onEditorBlur={handleEditorBlur} onReferencedNft={onReferencedNft} onMentionedUser={onMentionedUser} onDrop={onDrop} diff --git a/components/waves/CreateDropInput.tsx b/components/waves/CreateDropInput.tsx index 9841b50ec8..7c3046cbcc 100644 --- a/components/waves/CreateDropInput.tsx +++ b/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) => void; readonly onReferencedNft: (referencedNft: ReferencedNft) => void; readonly onMentionedUser: ( mentionedUser: Omit @@ -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]"}`}