[React Native for Windows]: Keyboard tab is moving to previously opened screen while the current screen is being opened

[aRajeshKumar]

trafficstars

Current Behavior

[React Native for Windows]: Keyboard tab is moving to previously opened screen while the current screen is being opened

Expected Behavior

• Cursor should not leave the current screen.

How to reproduce

Repro steps:

• Create stack navigator with two screen (Ex: Home screen & details screen)
• Go to Home screen(this screen contains few TextInputs), click a button to go to details screen
• Keep hitting the TAB key. When the cursor is invisible, type few random characters. These characters are actually being typed in the Home screen's text input boxes.

Your Environment

software	version
iOS or Android	React Native for Windows
@react-navigation/native	5.8.0
@react-navigation/stack	5.10.0
react-native-gesture-handler	1.8.0
react-native-safe-area-context	3.1.8
react-native-screens	2.11.0
react-native	0.63.3
expo
node
npm or yarn	yarn

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/native (found: 5.8.0, latest: 5.8.10)
• @react-navigation/stack (found: 5.10.0, latest: 5.12.8)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[aRajeshKumar]

Yes, it is the same issue.

[satya164]

We (The React Navigation team) don't officially work on Windows support, so it's upto the community debug such issues and send pull requests.

[kaiguo]

@chrisglein

[agniuks]

The above PR should fix this in the 0.65 RNW release. If this is currently blocking anyone, please reach out and we will backport the fix to 0.64.

[aRajeshKumar]

Thank you @AgneLukoseviciute for fixing this :-)

[JerryMacedoCastro]

Facing the same problem here!

[agniuks]

@JerryMacedoCastro could you confirm what versions of RNW and react-navigation you are on?

[JerryMacedoCastro]

@JerryMacedoCastro could you confirm what versions of RNW and react-navigation you are on?

"react-native-windows": "0.64.14" "@react-navigation/native": "5.9.3"

[agniuks]

@JerryMacedoCastro could you confirm what versions of RNW and react-navigation you are on?

"react-native-windows": "0.64.14" "@react-navigation/native": "5.9.3"

Hmm... 64.14 includes the display:none fix referenced above so something else must still be causing this.

Until it's fixed, you can work around this issue by using a useFocusEffect() hook to make the textInput of a page editable only when the page is in focus -- example code here: https://github.com/AgneLukoseviciute/react-navigation-repro/blob/main/App.tsx

[laimasingla]

Im also facing this issue. Below are the versions Im using "react-native-windows": "0.64.23" "react-navigation/native": "5.9.3" Using tab it first focuses on all elemenets in home page and then it goes to detail page. How can I use useFocusEffect for all elemenets ? Thanks in advance !!

[agniuks]

@laimasingla There are equivalents of focusable for other components (like disabled for Pressable, Button, Switch) that you could use with that same hook. For a cleaner approach it might be worth creating a view that includes all of your elements and try using the focusable prop with useFocusEffect() hook to remove keyboard focus from all elements at once.

I think the keyboard tab moving to previously opened screens might connect with react-native-screens and support for detaching inactive screens, issue tracking that work here: https://github.com/microsoft/react-native-windows/issues/4152

[nilaysanghvi]

Hi @AgneLukoseviciute. I am from the same team as the author of the issue. For us, the issue is still not fixed. Below are the versions we are using - "react-native": 0.63.4 "react-native-windows": 0.63.41 "react-navigation/stack": 5.14.9 "react-navigation/native": 5.9.8

From the changelog of react-native-windows (https://github.com/microsoft/react-native-windows/blob/0.63-stable/vnext/CHANGELOG.md#06334), the fix was backported to v0.63.34 and we are already above that version. Could you please help us figure out why we are still facing this issue?

[chrisglein]

The 0.63 release for RNW (September 2020) has received some small dot releases, but is fundamentally 2 years old and not in active support. I'm not sure why this backported fix you referenced isn't working for you. But overall, I'd recommend updating your RN version to ensure you get the latest fixes (currently 0.68 is current, with 0.69 in preview)

[nilaysanghvi]

@chrisglein We have updated to the following latest versions and we are still facing the same issue -

"react-native": 0.68.2 "react-native-windows": 0.68.9 "react-navigation/stack": 6.2.2 "react-navigation/native": 6.0.11 "react-native-screens": 3.15.0

Could you please suggest what we can do now to fix the issue?

[agniuks]

I think this is the same root issue for what we're seeing in gallery - https://github.com/microsoft/react-native-gallery/issues/231. Seems like fixing display:none hasn't fixed this. The app-side workaround should still work, but we should take a look at fixing this on the platform side .... again.

[github-actions[bot]]

Hey! Thanks for opening the issue. Windows and MacOS support in React Navigation is a community effort. We don't have the resources to test and maintain these platforms. Any help with fixing issues on these platforms is appreciated. Please feel free to open a PR to fix the issue.