diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index 353d593cea..0514e7d3ec 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -107,7 +107,9 @@ export const ComposePost = observer(function ComposePost({ text: initText, imageUris: initImageUris, cancelRef, + visible, }: Props & { + visible?: boolean cancelRef?: React.RefObject }) { const {currentAccount} = useSession() @@ -155,33 +157,6 @@ export const ComposePost = observer(function ComposePost({ const [labels, setLabels] = useState([]) const [threadgate, setThreadgate] = useState([]) - useEffect(() => { - if (!isAndroid) return - - // optimistic first try to focus keyboard - const timeout = setTimeout(() => { - textInput.current?.focus() - }, 50) - - // however, sometimes that fires too soon, and the keyboard doesn't show - // so we try a few more times - let numTries = 5 - const interval = setInterval(() => { - if (Keyboard.isVisible() || numTries-- <= 0) { - clearInterval(interval) - } else { - // focusing doesn't open keyboard if it's already focused - textInput.current?.blur() - textInput.current?.focus() - } - }, 250) - - return () => { - clearTimeout(timeout) - clearInterval(interval) - } - }, []) - const gallery = useMemo( () => new GalleryModel(initImageUris), [initImageUris], @@ -543,7 +518,9 @@ export const ComposePost = observer(function ComposePost({ ref={textInput} richtext={richtext} placeholder={selectTextInputPlaceholder} - autoFocus={!isAndroid} + // fixes autofocus on android + key={isAndroid ? (visible ? 'visible' : 'hidden') : 'static'} + autoFocus setRichText={setRichText} onPhotoPasted={onPhotoPasted} onPressPublish={onPressPublish} diff --git a/src/view/shell/Composer.tsx b/src/view/shell/Composer.tsx index c80d7845b3..5033250972 100644 --- a/src/view/shell/Composer.tsx +++ b/src/view/shell/Composer.tsx @@ -1,4 +1,4 @@ -import React, {useLayoutEffect} from 'react' +import React, {useLayoutEffect, useState} from 'react' import {Modal, View} from 'react-native' import {GestureHandlerRootView} from 'react-native-gesture-handler' import {RootSiblingParent} from 'react-native-root-siblings' @@ -24,9 +24,14 @@ export const Composer = observer(function ComposerImpl({}: { const t = useTheme() const state = useComposerState() const ref = useComposerCancelRef() + const [shown, setShown] = useState(false) const open = !!state + if (!open && shown) { + setShown(false) + } + return ( setShown(true)} onRequestClose={() => ref.current?.onPressCancel()}>