Merge pull request #34404 from tienifr/fix/33466

fix: compose box is shown after tapping header and returning back

src/components/Composer/index.android.tsx

@@ -3,6 +3,7 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import type {TextInput} from 'react-native';
 import {StyleSheet} from 'react-native';
 import RNTextInput from '@components/RNTextInput';
+import useResetComposerFocus from '@hooks/useResetComposerFocus';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ComposerUtils from '@libs/ComposerUtils';
@@ -28,6 +29,7 @@ function Composer(
     ref: ForwardedRef<TextInput>,
 ) {
     const textInput = useRef<TextInput | null>(null);
+    const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput);
 
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -89,6 +91,12 @@ function Composer(
             /* eslint-disable-next-line react/jsx-props-no-spreading */
             {...props}
             readOnly={isDisabled}
+            onBlur={(e) => {
+                if (!isFocused) {
+                    shouldResetFocus.current = true; // detect the input is blurred when the page is hidden
+                }
+                props?.onBlur?.(e);
+            }}
         />
     );
 }

src/components/Composer/index.ios.tsx

@@ -3,6 +3,7 @@ import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 import type {TextInput} from 'react-native';
 import {StyleSheet} from 'react-native';
 import RNTextInput from '@components/RNTextInput';
+import useResetComposerFocus from '@hooks/useResetComposerFocus';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ComposerUtils from '@libs/ComposerUtils';
@@ -28,7 +29,7 @@ function Composer(
     ref: ForwardedRef<TextInput>,
 ) {
     const textInput = useRef<TextInput | null>(null);
-
+    const {isFocused, shouldResetFocus} = useResetComposerFocus(textInput);
     const styles = useThemeStyles();
     const theme = useTheme();
 
@@ -84,6 +85,12 @@ function Composer(
             /* eslint-disable-next-line react/jsx-props-no-spreading */
             {...props}
             readOnly={isDisabled}
+            onBlur={(e) => {
+                if (!isFocused) {
+                    shouldResetFocus.current = true; // detect the input is blurred when the page is hidden
+                }
+                props?.onBlur?.(e);
+            }}
         />
     );
 }

src/hooks/useResetComposerFocus.ts

@@ -0,0 +1,19 @@
+import {useIsFocused} from '@react-navigation/native';
+import type {MutableRefObject} from 'react';
+import {useEffect, useRef} from 'react';
+import type {TextInput} from 'react-native';
+
+export default function useResetComposerFocus(inputRef: MutableRefObject<TextInput | null>) {
+    const isFocused = useIsFocused();
+    const shouldResetFocus = useRef(false);
+
+    useEffect(() => {
+        if (!isFocused || !shouldResetFocus.current) {
+            return;
+        }
+        inputRef.current?.focus(); // focus input again
+        shouldResetFocus.current = false;
+    }, [isFocused, inputRef]);
+
+    return {isFocused, shouldResetFocus};
+}