Merge pull request #88122 from software-mansion-labs/fix/landscape-transition-keyboard-focus

Author: mjasikowski

src/components/RNMarkdownTextInput.tsx

@@ -4,6 +4,7 @@ import type {ForwardedRef} from 'react';
 import React, {useCallback, useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import Animated, {useSharedValue} from 'react-native-reanimated';
+import useLandscapeOnBlurProxy from '@hooks/useLandscapeOnBlurProxy';
 import useShortMentionsList from '@hooks/useShortMentionsList';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -36,6 +37,8 @@ function RNMarkdownTextInputWithRef({maxLength, parser, ref, forwardedFSClass =
     // Expose the ref to the parent component
     React.useImperativeHandle<AnimatedMarkdownTextInputRef | null, AnimatedMarkdownTextInputRef | null>(ref, () => inputRef.current);
 
+    const handleBlur = useLandscapeOnBlurProxy(inputRef, props.onBlur);
+
     // Check if the cursor is at the end of the text
     const isCursorAtEnd = props.selection && props.value && props.selection.start === props.value.length;
 
@@ -96,6 +99,7 @@ function RNMarkdownTextInputWithRef({maxLength, parser, ref, forwardedFSClass =
                  * If maxLength is not set, we should set it to CONST.MAX_COMMENT_LENGTH + 1, to avoid parsing markdown for large text
                  */
                 maxLength={maxLength ?? CONST.MAX_COMMENT_LENGTH + 1}
+                onBlur={handleBlur}
             />
         </View>
     );

src/components/RNTextInput.tsx

@@ -1,8 +1,9 @@
 import type {ForwardedRef} from 'react';
-import React from 'react';
+import React, {useRef} from 'react';
 import type {TextInputProps} from 'react-native';
 import {TextInput} from 'react-native';
 import Animated from 'react-native-reanimated';
+import useLandscapeOnBlurProxy from '@hooks/useLandscapeOnBlurProxy';
 import useTheme from '@hooks/useTheme';
 import type {ForwardedFSClassProps} from '@libs/Fullstory/types';
 import CONST from '@src/CONST';
@@ -19,13 +20,16 @@ type RNTextInputWithRefProps = TextInputProps &
 
 function RNTextInputWithRef({ref, forwardedFSClass = CONST.FULLSTORY.CLASS.UNMASK, ...props}: RNTextInputWithRefProps) {
     const theme = useTheme();
+    const inputRef = useRef<AnimatedTextInputRef | null>(null);
+    const handleBlur = useLandscapeOnBlurProxy(inputRef, props.onBlur);
 
     return (
         <AnimatedTextInput
             allowFontScaling={false}
             textBreakStrategy="simple"
             keyboardAppearance={theme.colorScheme}
             ref={(refHandle: AnimatedTextInputRef) => {
+                inputRef.current = refHandle;
                 if (typeof ref !== 'function') {
                     return;
                 }
@@ -35,6 +39,7 @@ function RNTextInputWithRef({ref, forwardedFSClass = CONST.FULLSTORY.CLASS.UNMAS
             fsClass={forwardedFSClass}
             // eslint-disable-next-line
             {...props}
+            onBlur={handleBlur}
         />
     );
 }

src/hooks/useLandscapeOnBlurProxy/index.android.ts

@@ -0,0 +1,23 @@
+import useIsInLandscapeMode from '@hooks/useIsInLandscapeMode';
+import usePrevious from '@hooks/usePrevious';
+import type {UseLandscapeOnBlurProxy} from './types';
+
+// During a portrait → landscape rotation the input briefly ends up behind the keyboard
+// while KeyboardAvoidingView catches up, and native blurs it as a result. When that blur
+// fires we re-focus the input after a short delay — long enough for KAV to reposition so
+// the input is on-screen again, otherwise the re-focus gets clobbered by the same issue.
+const ROTATION_REFOCUS_DELAY_MS = 100;
+
+const useLandscapeOnBlurProxy: UseLandscapeOnBlurProxy = (inputRef, onBlur) => {
+    const isInLandscapeMode = useIsInLandscapeMode();
+    const prevIsInLandscapeMode = usePrevious(isInLandscapeMode);
+
+    return (e) => {
+        if (prevIsInLandscapeMode !== isInLandscapeMode && isInLandscapeMode) {
+            setTimeout(() => inputRef.current?.focus?.(), ROTATION_REFOCUS_DELAY_MS);
+        }
+        onBlur?.(e);
+    };
+};
+
+export default useLandscapeOnBlurProxy;

src/hooks/useLandscapeOnBlurProxy/index.ts

@@ -0,0 +1,7 @@
+import type {UseLandscapeOnBlurProxy} from './types';
+
+// The rotation-refocus workaround is only needed on Android — iOS and web don't lose focus
+// when the orientation flips, so we pass the caller's onBlur through unchanged.
+const useLandscapeOnBlurProxy: UseLandscapeOnBlurProxy = (_inputRef, onBlur) => onBlur;
+
+export default useLandscapeOnBlurProxy;

src/hooks/useLandscapeOnBlurProxy/types.ts

@@ -0,0 +1,10 @@
+import type {RefObject} from 'react';
+import type {FocusEvent} from 'react-native';
+
+type FocusableRef = RefObject<{focus?: () => void} | null>;
+
+type OnBlurHandler = (e: FocusEvent) => void;
+
+type UseLandscapeOnBlurProxy = (inputRef: FocusableRef, onBlur?: OnBlurHandler) => OnBlurHandler | undefined;
+
+export type {FocusableRef, OnBlurHandler, UseLandscapeOnBlurProxy};