search

necolas / react-native-web

Cross-platform React UI packages
https://necolas.github.io/react-native-web
MIT License
21.63k stars 1.79k forks source link

Automatic Scroll to First Element in Modal with ScrollView on Safari #2544

Open kidroca opened 1 year ago

kidroca commented 1 year ago

Is there an existing issue for this?

Describe the issue

When opening a Modal that includes a ScrollView or a VirtualList spanning multiple pages, the ScrollView automatically scrolls to the first element. This issue arises from the modal focus trap logic, even when the initialScrollIndex is set to a value other than the index of the first element.

To illustrate this issue, please refer to the steps and accompanying video below:

  1. The intended page is initially displayed.
  2. The modal's focus trap initialization logic triggers focus on the first element inside the ScrollView.
  3. The focused element automatically scrolls itself into view.

https://github.com/necolas/react-native-web/assets/12156624/aebb5277-a512-463b-a3e7-921961e5d7b8

This issue does not occur in Chrome. It happens only on Safari and mobile Safari.

Expected behavior

Opening a Modal containing a scroll view should not alter the initial scroll position

Steps to reproduce

Environment:

Steps to reproduce:

  1. Implement a FlatList inside a Modal.
  2. Ensure the FlatList's content is substantial enough to span across multiple pages.
  3. Set the initialScrollIndex to a value representing an item located in the middle of the list.
  4. Open the Modal.

Expected outcome:

Actual outcome:

Test case

https://codesandbox.io/s/upbeat-lalande-pjq75x

Additional comments

The issue does not seem to occur if we use Chrome

kidroca commented 1 year ago

Is there any information about updates being made to the Modal Focus Trap logic, or other potential solutions that might resolve the issue in question, such as #2483?

I'm hesitant to begin working on a fix that alters the Modal Focus Trap logic without knowing if changes are already planned or underway.

MrBlackmax commented 1 week ago

I have the same issue, are there any updates regarding this?