microsoft / microsoft/react-native-windows

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

Open
#12,964 2 comments 0 reactions 1 assignee View on GitHub

@acoates-ms is already working on this.

Since Aug 14, 2024.

Area: Focus Area: Paper Area: ScrollView bug Old Architecture Partner: Microsoft Workstream: Component Parity
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.