search

microsoft / react-native-windows

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

Calling ref.focus() on component no longer forces scrollview to bring component into view #12964

Open aaronvega-msft opened 2 months ago

aaronvega-msft commented 2 months ago

Problem Description

We have a list of focusable elements within a scrollview, and we call ref.focus() on an element to force scrollview to bring it into view. This worked fine until this change came in: https://github.com/microsoft/react-native-windows/commit/571e6e65fc47b361c326fe4916f5df4c78bf943b

The element still gets focus, but scrollview no longer brings it into view.

An engineer from the RNW team suggested I revert the change and it fixed the issue. Can we get a fix for this?

Steps To Reproduce

  1. Within a scrollview, create a list of focusable items.
  2. Render the scrollview so that some items are scrolled out of view.
  3. Call ref.focus() on any out-of-view item.

Expected Results

Scrollview should scroll to newly focused element.

CLI version

9.5.1

Environment

System:
  OS: Windows 11 10.0.22631
  CPU: (20) x64 Intel(R) Core(TM) i9-10900 CPU @ 2.80GHz
  Memory: 25.67 GB / 63.71 GB
Binaries:
  Node:
    version: 18.16.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: ~\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 9.5.1
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled        
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.18362.0
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 16.11.34729.46 (Visual Studio Enterprise 2019)  
    - 17.9.34728.123 (Visual Studio Enterprise 2022)  
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.0.0
    wanted: 18.0.0
  react-native:
    installed: 0.73.0
    wanted: 0.73.0
  react-native-windows:
    installed: 0.73.3
    wanted: 0.73.3
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Target Platform Version

None

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

No response

acoates-ms commented 2 months ago

We probably need to add code to call BringIntoView on the element - since programmatic focus doesn't appear to bring the element into view automatically.

chrisglein commented 2 months ago

Original change by Eric makes sense, although for your app reverting that with a patch is a fine workaround. Full fix would involve looking at what Andrew described above.