search

microsoft / react-native-windows

A framework for building native Windows apps with React.
https://microsoft.github.io/react-native-windows/
Other
16.33k stars 1.14k forks source link

In react-navigation on RNW: Keyboard tab is moving to previously opened screen while the current screen is being opened #10323

Open AgneLukoseviciute opened 2 years ago

AgneLukoseviciute commented 2 years ago

When navigating to a new page using react-navigation, the components of a previously opened page remain in the tabindex. I think this is also related to some tabbing issues we're seeing in gallery, since we use react-navigation there (#231, #222). There's also an internal partner asking for a fix.

From react-navigation https://github.com/react-navigation/react-navigation/issues/9109:

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.

Expected Behavior:

Cursor should not leave the current screen.

AgneLukoseviciute commented 2 years ago

@chiaramooney, do you think this could be related to https://github.com/microsoft/react-native-windows/issues/4152?

chiaramooney commented 2 years ago

Adding screens support would definitely fix the issue of being able to access elements on a previous screen after navigation has been completed as that screen would be removed from the visual tree. In this case, since the access issue is happening during navigation I'm not sure if screens would fully solve the issue because it does not delete the previous screen until the new screen has finished being navigated to. @AgneLukoseviciute at exactly which stage of navigation the issue is occurring?

AgneLukoseviciute commented 2 years ago

@chiaramooney From everything I've seen, this happens once you've already navigated to a new page and is pretty easy to repro. It might be possible you can somehow quickly tab onto the other page while a new one is being loaded, but I haven't seen that myself nor heard anyone bringing that side of it up.

chiaramooney commented 1 year ago

This issue will be solved by react-native-screens or a native implementation of no-hide-descendants that overrides the UIA tree. Note traversing all elements and setting their accessible prop to false will not be sufficient because it will not cover the community module case (most community modules have not implemented the accessible prop).

For now, there is a native implementation of no-hide-descendants in progress. We also have a workaround implemented in gallery which sets the contents of the page to an empty View when the page is blurred. See gallery's Page.tsx for a source example.

Bumping issue to 72.

chiaramooney commented 1 year ago

Other prioritized work at this time, bumping to v0.73

TatianaKapos commented 11 months ago

Do we want this tied to v74 or move to backlog/next?