Fix duplicates in thread composer (#6068)

3 files changed, 22 insertions, 4 deletions

diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index 3a9114b2f..842edeb14 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -743,6 +743,7 @@ let ComposerPost = React.memo(function ComposerPost({
           placeholder={selectTextInputPlaceholder}
           autoFocus
           webForceMinHeight={forceMinHeight}
+          isActive={isActive}
           setRichText={rt => {
             dispatchPost({type: 'update_richtext', richtext: rt})
           }}
diff --git a/src/view/com/composer/text-input/TextInput.tsx b/src/view/com/composer/text-input/TextInput.tsx
index 5d8c49abf..b9c9579fb 100644
--- a/src/view/com/composer/text-input/TextInput.tsx
+++ b/src/view/com/composer/text-input/TextInput.tsx
@@ -44,6 +44,7 @@ interface TextInputProps extends ComponentProps<typeof RNTextInput> {
   richtext: RichText
   placeholder: string
   webForceMinHeight: boolean
+  isActive: boolean
   setRichText: (v: RichText) => void
   onPhotoPasted: (uri: string) => void
   onPressPublish: (richtext: RichText) => void
diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx
index f4cb004ed..7ce7150a1 100644
--- a/src/view/com/composer/text-input/TextInput.web.tsx
+++ b/src/view/com/composer/text-input/TextInput.web.tsx
@@ -42,6 +42,7 @@ interface TextInputProps {
   placeholder: string
   suggestedLinks: Set<string>
   webForceMinHeight: boolean
+  isActive: boolean
   setRichText: (v: RichText | ((v: RichText) => RichText)) => void
   onPhotoPasted: (uri: string) => void
   onPressPublish: (richtext: RichText) => void
@@ -55,6 +56,7 @@ export const TextInput = React.forwardRef(function TextInputImpl(
     richtext,
     placeholder,
     webForceMinHeight,
+    isActive,
     setRichText,
     onPhotoPasted,
     onPressPublish,
@@ -94,19 +96,30 @@ export const TextInput = React.forwardRef(function TextInputImpl(
   )
 
   React.useEffect(() => {
+    if (!isActive) {
+      return
+    }
     textInputWebEmitter.addListener('publish', onPressPublish)
     return () => {
       textInputWebEmitter.removeListener('publish', onPressPublish)
     }
-  }, [onPressPublish])
+  }, [onPressPublish, isActive])
+
   React.useEffect(() => {
+    if (!isActive) {
+      return
+    }
     textInputWebEmitter.addListener('media-pasted', onPhotoPasted)
     return () => {
       textInputWebEmitter.removeListener('media-pasted', onPhotoPasted)
     }
-  }, [onPhotoPasted])
+  }, [isActive, onPhotoPasted])
 
   React.useEffect(() => {
+    if (!isActive) {
+      return
+    }
+
     const handleDrop = (event: DragEvent) => {
       const transfer = event.dataTransfer
       if (transfer) {
@@ -144,7 +157,7 @@ export const TextInput = React.forwardRef(function TextInputImpl(
       document.body.removeEventListener('dragover', handleDragEnter)
       document.body.removeEventListener('dragleave', handleDragLeave)
     }
-  }, [setIsDropping])
+  }, [setIsDropping, isActive])
 
   const pastSuggestedUris = useRef(new Set<string>())
   const prevDetectedUris = useRef(new Map<string, LinkFacetMatch>())
@@ -242,11 +255,14 @@ export const TextInput = React.forwardRef(function TextInputImpl(
     [editor],
   )
   React.useEffect(() => {
+    if (!isActive) {
+      return
+    }
     textInputWebEmitter.addListener('emoji-inserted', onEmojiInserted)
     return () => {
       textInputWebEmitter.removeListener('emoji-inserted', onEmojiInserted)
     }
-  }, [onEmojiInserted])
+  }, [onEmojiInserted, isActive])
 
   React.useImperativeHandle(ref, () => ({
     focus: () => {