diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index 3a9114b2f4..842edeb14a 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 5d8c49abf4..b9c9579fbe 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 { 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 f4cb004ed4..7ce7150a1d 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 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()) const prevDetectedUris = useRef(new Map()) @@ -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: () => {