react-navigation/react-navigation

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

Open

#9109 opened on Nov 30, 2020

View on GitHub
 (17 comments) (0 reactions) (0 assignees)TypeScript (23,189 stars) (4,962 forks)batch import
bughelp wantedpackage:stackplatform:windows

Description

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

Contributor guide

Tech stack
reacttypescript
Domain
mobilefrontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React NativeReact Navigation
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
The issue reports that keyboard focus moves to the previous screen when switching screens in a stack navigator on React Native for Windows. Start by examining the React Navigation focus management code, particularly the useFocusEffect hook and screen transition logic. Check the Windows specific implementation in react native screens and the keyboard handling in React Native for Windows. Look at comments for any attempted fixes or debugging steps.