react-native icon indicating copy to clipboard operation
react-native copied to clipboard

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

Open Ol1va opened this issue 2 years ago • 16 comments

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

Ol1va avatar Mar 31 '22 10:03 Ol1va

Probably related (the issue is closed but still reproduces): https://github.com/facebook/react-native/issues/19366

chrisbobbe avatar Mar 31 '22 23:03 chrisbobbe

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

Ol1va avatar Apr 01 '22 05:04 Ol1va

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. 🙂

chrisbobbe avatar Apr 01 '22 05:04 chrisbobbe

Any updates on this?

ghiculescualexandru avatar Apr 20 '22 10:04 ghiculescualexandru

Any updates on this?

Unfortunately, no

Ol1va avatar Apr 20 '22 13:04 Ol1va

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>

ghiculescualexandru avatar Apr 20 '22 13:04 ghiculescualexandru

@ghiculescualexandru you did this for every TextInput box?

sankparatkar avatar May 06 '22 13:05 sankparatkar

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

ghiculescualexandru avatar May 09 '22 07:05 ghiculescualexandru

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] avatar Nov 06 '22 02:11 github-actions[bot]

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

jludwiggreenaction avatar Nov 18 '22 17:11 jludwiggreenaction

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

jwallet avatar Mar 29 '23 18:03 jwallet

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

AlkanV avatar Nov 06 '23 08:11 AlkanV

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

alainib avatar Dec 22 '23 14:12 alainib

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

still happening on .7x

firstpersoncode avatar Jan 05 '24 08:01 firstpersoncode

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

fabOnReact avatar Jan 17 '24 07:01 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

I am experiencing the same issue. @fabOnReact

shunnobir avatar Feb 03 '24 09:02 shunnobir

Still an issue on 0.72.7

simonadenic avatar Jul 17 '24 13:07 simonadenic