question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:4
  • Comments:10

github_iconTop GitHub Comments

8reactions
ghiculescualexandrucommented, Apr 20, 2022

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>
0reactions
jludwiggreenactioncommented, Nov 18, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

RN TextInput not lose it's focus and hide it's keyboad when ...
Scroll view dismiss the focus when click outside function without any extra things. Share.
Read more >
How to Dismiss the Keyboard in Flutter the Right Way
Step 2: Dismiss the Keyboard. To trigger the keyboard to dismiss itself, we need to remove “focus” from our text field. By removing...
Read more >
Handle input method visibility | Android Developers
When input focus moves in or out of an editable text field, Android shows or hides the input method—such as the on-screen keyboard—as ......
Read more >
Today's React Native Tip: Keyboard issues in ScrollView
Fix: keyboardShouldPersistTaps · 'never' (the default), tapping outside of the focused text input when the keyboard is up dismisses the keyboard. When this ......
Read more >
How to open or dismiss the keyboard in Flutter - LogRocket Blog
If you create something similar to the above screen, you must remember that it will push the widget upward when the keyboard opens,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found