TextInput doesn't lose focus after dismissing keyboard on some Android devices

[Ol1va]

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.

2022-03-31.17.43.12.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

[chrisbobbe]

Probably related (the issue is closed but still reproduces): #19366

[Ol1va]

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

[chrisbobbe]

Hmm, yeah, that's unfortunate. I'm hoping the link might be helpful for you or anyone else who has time to dig into React Native's internals to find the bug and propose a fix. I'll post here if I manage to do that too. 🙂

[ghiculescualexandru]

Any updates on this?

[Ol1va]

Any updates on this?

Unfortunately, no

[ghiculescualexandru]

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>

[sankparatkar]

@ghiculescualexandru you did this for every TextInput box?

[ghiculescualexandru]

Only needed it in a single place, however, you can create a component with this behaviour and use it everywhere

[github-actions]

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.

[jludwiggreenaction]

This is still an issue on react native v0.69.6, unsure if fixed in .7

[jwallet]

still happening in "react-native": "0.71.3"

[AlkanV]

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

[alainib]

yep still have this issue. any fix without having to add ref for each input ?

[firstpersoncode]

This is still an issue on react native v0.69.6, unsure if fixed in .7

still happening on .7x

[fabOnReact]

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

[shunnobir]

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

[simonadenic]

Still an issue on 0.72.7

[kamajus3]

Nothing new on 0.74.3

[pranshuchittora]

😢 still broken on 0.75.3