[Android] First TextInput focus automatically blurred

[Lulunx]

Description

Hey, I've a little problem with the TextInput of React-Native library on Android. When I want to focus an input for the 1st time, he's automatically blurred. Then when I focus a second time an input, it's working well. I don't know if it's due to the navigation or the TextInput. I'm also a little bit disappointed because it's working well on IOS, so I really don't know where I've to search for resolve this problem.

React Native version:

$ react-native info
info Fetching system and libraries information...
System:
    OS: macOS 10.15.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 25.53 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.14.1 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.0 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.7, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 28
      Build Tools: 28.0.3
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6308749
    Xcode: 11.7/11E801a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_242 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.3 => 0.63.3 
    react-native-macos: Not Found
  npmGlobalPackages:

Steps To Reproduce

You can see here a video of this issue.

Expected Results

I expect the input to be focused directly when I first click on it, and not to be blurred.

Snack, code example, screenshot, or link to a repository:

It's actually hard for me to provide you some code example because it's for a professional use, I will do my possible to give access to the repo for some people if someone want to help me to fix this, otherwise here is the component I'm using for my inputs

import React from 'react';
import { StyleSheet, TextInput, View } from 'react-native';

import colors from 'Resources/Colors/colors';
import fonts from 'Resources/Fonts/fonts';

class MyInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            backgroundColor: colors.textInputTransparentBackground,
        };
    }

    onFocus() {
        console.log('I focus yea');
        this.setState({ backgroundColor: colors.focusedColor });
    }

    onBlur() {
        console.log('I blur noo');
        this.setState({ backgroundColor: colors.textInputTransparentBackground });
    }

    render() {
        const {
            width = '100%',
            mode = 'outlined',
            textAlign = 'left',
            autoFocus = false,
            keyboardType = 'default',
            name,
            placeholder,
            style = null,
            color = colors.primary,
            placeholderTextColor = '#aaaaaa',
            innerRef,
            testID = null,
            onChangeText,
            onSubmitEditing = function() {
                return;
            },
        } = this.props;
        const { backgroundColor } = this.state;
        let value = this.props.value;
        if (value !== undefined && value !== null) {
            value = value.toString();
        }
        return (
            <View style={{ ...styles.container, width }}>
                <TextInput
                    textAlign={textAlign}
                    autoFocus={autoFocus}
                    keyboardType={keyboardType}
                    placeholder={placeholder}
                    selectTextOnFocus={true}
                    value={value}
                    onFocus={() => this.onFocus()}
                    onBlur={() => this.onBlur()}
                    style={[
                        style,
                        styles.input,
                        mode === 'outlined' ? styles.outlined : styles.flat,
                        {
                            borderColor: color,
                            color: colors.black,
                            backgroundColor: backgroundColor,
                        },
                    ]}
                    placeholderTextColor={placeholderTextColor}
                    ref={innerRef}
                    testID={testID}
                    onChangeText={value => {
                        onChangeText(name, value);
                    }}
                    onSubmitEditing={() => onSubmitEditing()}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    outlined: {
        borderWidth: 1,
        borderRadius: 7,
    },
    flat: {
        borderBottomWidth: 3,
        borderRadius: 5,
    },
    input: {
        padding: 5,
        height: 40,
        ...fonts.mediumBoldItalic,
        flex: 1,
        width: '100%',
    },
});

const Input = React.forwardRef((props, ref) => <MyInput {...props} innerRef={ref} />);

export default Input;

Thanks for the time you will take for helping me. Lucas

[Lulunx]

Up ! Still not fixed :/

[jaytxng]

seeing a similar issue where autofocus prop set to true isn't focused on load. currently using a workaround with ref hook and setTimeout

[mingxin-yang]

same problem

[kunsachdeva]

Was there any solution for this?

[wayne-tt]

I also had the same issue.

I confirmed that this problem does not exist when only React Native's textinput is used.

I expected there to be a problem with React Navigation and searched for it to solve this issue.

Perhaps you too will use this open-source, If you are a React Native developer.

Unfortunately, there is indeed no better navigation open source than this.

There is a comment in KeyboardManager.tsx like this:

      // If the interaction was super short we should make sure keyboard won't hide again.

      // Too fast input refocus will result only in keyboard flashing on screen and hiding right away.
      // During first ~100ms keyboard will be dismissed no matter what,
      // so we have to make sure it won't interrupt input refocus logic.
      // That's why when the interaction is shorter than 100ms we add delay so it won't hide once again.
      // Subtracting timestamps makes us sure the delay is executed only when needed.

So, I used setTimeout. (cry... 😭 )

Good Luck ~ bro.

#Android #react-navigation #keyboard #dismiss #blur

[jzxchiang1]

Yeah, I needed to disable autoFocus and do this instead:

  useEffect(() => {
    setTimeout(() => textInputRef.current?.focus(), 100);
  }, []);

[AliRehman7141]

I'm facing this issue on android with these versions. However, my issue is every time I tap on the input keyboard automatically closes after opening for a second. "react": "17.0.1", "react-native": "0.64.2",

[vitexikora]

I'm facing this issue on android with these versions. However, my issue is every time I tap on the input keyboard automatically closes after opening for a second. "react": "17.0.1", "react-native": "0.64.2",

I had the same problem on RN 0.64. Fixed it by upgrading to 0.66.

[g-popovic]

Same problem when using autoFocus. React v18.1, React native v0.70.6

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.