react-native: TextInput doesn't lose focus after dismissing keyboard on some Android devices

Description

Current Behavior

When TextInput is focused and keyboard is shown, pressing hardware back button dismisses the keyboard but doesnt’t blur the TextInput. Pressing on the TextInput again doesn’t trigger the keyboard.

I noticed it happening on these devices: Mobistart V1 (android v 9), Meizu M3s (android v 5.1), Honor 8 (android v 7). This behaviour doesn’t seem to be dependant on Android version or brand. Also this behaviour appears in every React Native app.

Expected Behavior

The TextInput should lose focus after hardware back button press.

https://user-images.githubusercontent.com/43006289/161037494-008f1c5c-bc35-4eb4-a633-47dc3211ad80.mp4

Version

0.65.1

Output of npx react-native info

No warnings or errors apper in console.

Steps to reproduce

Basically it happens with any TextInput.

<TextInput />

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

No response

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 10
  • Comments: 16 (1 by maintainers)

Most upvoted comments

Any updates on this?

Unfortunately, no

I managed to work around by adding a ref to the text input and a keyboard listener to blur the text input when the keyboard hide. Here is the logic:

  const localInputRef = useRef<TextInput>();
  
  const keyboardDidHideCallback = () => {
     localInputRef.current.blur?.();   
  }

  useEffect(() => {
     const keyboardDidHideSubscription = Keyboard.addListener('keyboardDidHide', keyboardDidHideCallback);

     return () => {
      keyboardDidHideSubscription?.remove();
    };
  }, []);

 <TextInput
       ref={(ref) => {
          localInputRef && (localInputRef.current = ref as any);
       }}
 .....
 </TextInput>

still happening in “react-native”: “0.71.3”

Do you still experience this issue?

I have four years of experience maintaining facebook/react-native and I specialize in the Text and TextInput components. I currently have 58 facebook/react-native PRs.

If you still experience this issue, I will prepare a patched release with the fix.

Thanks a lot

I am experiencing the same issue. @fabOnReact

we also experience same issue on Android, When user press native back button to close keyboard, textinput of react native stays focused.

Unfortunately that solution doesn’t work for me, because it suggests to make a handler for each TextInput in every React Naive project.