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

[aRajeshKumar]

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]

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 !!