Focusing on a text input when navigating to a new screen only works when adding to the stack, not when going back.

[divonelnc]

Current Behavior

Calling .focus() on a text input (or using autoFocus) when the screen becomes focused works when you add a screen to the stack (Screen A -> Screen B) but not when going back (Screen B -> Screen A).
Instead, the input is focused for a second then blurs immediately.

Expected Behavior

The input should stay focused

How to reproduce

• Navigate back to a screen that has a text input with autoFocus on true
• OR call .focus() on the reference of the text input when the screen is focused
• OR copy-paste the following code:

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import * as React from "react";
import { TextInput, View, Button, Text } from "react-native";

function ScreenA({ navigation }) {
	const textInputRef = React.useRef();

	const focusOnInput = e => {
		textInputRef.current.focus();
	};

	navigation.addListener("focus", focusOnInput);
	return (
		<View>
			<Text>SCREEN A</Text>
			<TextInput ref={textInputRef} />
			<Button title="Go to screen B" onPress={() => navigation.navigate("ScreenB")} />
		</View>
	);
}

function ScreenB({ navigation }) {
	const textInputRef = React.useRef();

	const focusOnInput = e => {
		textInputRef.current.focus();
	};

	navigation.addListener("focus", focusOnInput);

	return (
		<View>
			<Text>SCREEN B</Text>
			<TextInput ref={textInputRef} />
			<Button title="Go to screen A" onPress={() => navigation.navigate("ScreenA")} />
		</View>
	);
}

const Stack = createStackNavigator();

function TestComp() {
	return (
		<NavigationContainer>
			<Stack.Navigator>
				<Stack.Screen component={ScreenA} name="ScreenA" />
				<Stack.Screen component={ScreenB} name="ScreenB" />
			</Stack.Navigator>
		</NavigationContainer>
	);
}

export default TestComp;

Your Environment

    "@chardskarth/react-gateway": "^3.0.3",
    "@expo/vector-icons": "^10.0.0",
    "@react-native-community/hooks": "^2.5.1",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "^5.6.1",
    "@react-navigation/drawer": "^5.8.4",
    "@react-navigation/material-bottom-tabs": "^5.2.12",
    "@react-navigation/native": "^5.6.1",
    "@react-navigation/stack": "^5.6.2",
    "@react-navigation/web": "^1.0.0-alpha.9",
    "@reduxjs/toolkit": "^1.4.0",
    "expo": "^38.0.0",
    "expo-asset": "~8.1.7",
    "expo-constants": "~9.1.1",
    "expo-font": "~8.2.1",
    "expo-web-browser": "~8.3.1",
    "moment": "^2.24.0",
    "moment-countdown": "0.0.3",
    "react": "16.11.0",
    "react-dom": "16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.0.tar.gz",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-paper": "^3.8.0",
    "react-native-reanimated": "~1.9.0",
    "react-native-remote-svg": "^2.0.6",
    "react-native-safe-area-context": "~3.0.7",
    "react-native-screens": "~2.9.0",
    "react-native-svg": "^12.1.0",
    "react-native-web": "~0.11.7",
    "react-native-webview": "9.4.0",
    "react-redux": "^7.1.3",
    "redux": "^4.0.5",
    "tinycolor2": "^1.4.1"

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/bottom-tabs (found: 5.2.5, latest: 5.6.1)
• @react-navigation/material-bottom-tabs (found: 5.1.7, latest: 5.2.12)
• @react-navigation/native (found: 5.1.4, latest: 5.6.1)
• @react-navigation/stack (found: 5.2.9, latest: 5.6.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[divonelnc]

I updated my packages and tried again (updated my report with my current packages). The issue persists.

[KristineTrona]

I have the same problem. Navigating back in the stack does not autoFocus the textinput if the autoFocus prop is true. It also does not work if you try to call focus() method directly on the textInput ref. I have found that adding a timeout before focusing the text input does work, but this is a workaround.

Here is the reproduction repo https://github.com/KristineTrona/rn-autofocus-issue/tree/master - see the readme, I found what is causing the issue, but it still seems a buggy behaviour to me.

[Rob2k9]

this same issue also affects hasTVPreferredFocus new screens with hasTVPreferredFocus true will get focus but if you go back to the screen before the hasTVPreferredFocus on that screen is not focused again instead it goes to the very first touchable

[yairopro]

That's because the autoFocus will, I quote:

focuses the input on componentDidMount

And going back to a screen doesn't remount it. The screen stays mounted behind all the time.
See in documentation.

Just passing by this issue

[divonelnc]

@yairopro That could be understandable if it would simply not focus the input - but it does focus it for a second then unfocuses it.
Also, if you check the description of the issue, the same issue happens if you call input.focus() manually on the screen focus event.

This quote from the bug description won't work either:

	const focusOnInput = e => {
		textInputRef.current.focus();
	};

	navigation.addListener("focus", focusOnInput);

[yairopro]

My bad

[AdamChrist]

@Rob2k9 I also have the same problem. Is there a solution?

[Mistes974]

Same problem here.. autoFocus on TextInput didn't work.
it's been a year already 😪

Edit (workaround ):

const isFocused = useIsFocused();
const ref = useRef();

useEffect(() => {
    if (isFocused) {
        ref.current.focus();
    }
}, [isFocused]);

  
return ( <TextInput ref={ref} /> )

[patrickspafford]

Haven't tried this myself yet, but does using the useFocusEffect work?

useFocusEffect(
    useCallback(() => {
      // focus the text input here
    }, []),
  )

[badiozam]

Same problem here.. autoFocus on TextInput didn't work. it's been a year already sleepy

Edit (workaround ):

const isFocused = useIsFocused();
const ref = useRef();

useEffect(() => {
    if (isFocused) {
        ref.current.focus();
    }
}, [isFocused]);

  
return ( <TextInput ref={ref} /> )

This unfortunately didn't work for me, still no auto focus. The code I used was:

    const isFocused = useIsFocused();
    const autoFocusInputRef = useRef();

     useEffect(() => { 
        if (isFocused ) {
            autoFocusInputRef.current.focus();
        }
    }, [isFocused]);

I'm using

"@react-navigation/stack@^6":
  version "6.0.11"

EDIT: Due to time constraints I ended up using this feel-dirty-work-around:

    useEffect(() => {

        setTimeout(() => {
            inputRef.current.focus();
        }, 100);

    }, []);

[pierregambaud]

Haven't tried this myself yet, but does using the useFocusEffect work?

useFocusEffect(
    useCallback(() => {
      // focus the text input here
    }, []),
  )

For me, it only works on a hard screen refresh but not on going back. The only workaround that really works in my code is @badiozam feel-dirty solution 😬

[ganholete]

Same problem, only solved with the timer workaround

[hugogoncalvez]

I used the following code on the button:

const onMouseDown = (event) => {
event.stopPropagation();
navigate(-1);
}