Scroll position of ScrollView jumps to WebView when pressed

[vigneshrajs]

Bug description:
When pressing a WebView inside a scrollable ScrollView, the scroll position jumps down to the WebView.

To Reproduce:

• Install React Native version 0.71.3 and React Native webview Version 11.25.0
• Place webview inside ScrollView.

The first time you press, it will jump down slightly.

Expected behavior:
When clicking a WebView inside a ScrollView, it should not change the scroll position of the parent ScrollView.

Environment:

• OS: Android
• OS version: >11
• react-native version: 0.71.3
• react-native-webview version: 11.25.0

[knakandakare]

Same issue here

[sanduluca]

I have the same issue.
It was also reported here: #2360 #2057
I also reported this issue in another repo ( here: iou90/react-native-autoheight-webview#259 ) but it seems to be a problem with WebView

Bug description:
Content jumps to top on first time press/click

To Reproduce:

To test on real device

1. Open the screen
2. Press the webview content

Source (static HTML or url):
https://snack.expo.dev/@sanduluca/webview-content-jump-on-press

1. Scan qr code and open app on a real android device
2. Press any area below first white section
   To reproduce start from 1

Expected behavior:
No jump when press webview content

Screenshots/Videos:

2023-06-13.14.12.57.mp4

Environment:

• OS: Android
• OS version: 12
• react-native version: 0.71.7
• react-native-webview version: ^12.0.2
• react-native-autoheight-webview version: ^1.6.5

[TheAlmightyBob]

It looks like the auto-scrolling is a behavior of the React Native ScrollView.

The only thing I imagine could be done from the react-native-webview side would be to set focusable to false... but I think that only makes sense if your WebView content is completely noninteractive? If that is your scenario, you could try hacking/patching in that change to see if it helps.

[sanduluca]

It looks like the auto-scrolling is a behavior of the React Native ScrollView.

The only thing I imagine could be done from the react-native-webview side would be to set focusable to false... but I think that only makes sense if your WebView content is completely noninteractive? If that is your scenario, you could try hacking/patching in that change to see if it helps.

The focusable={false} on <WebView /> doesn't seem to help with content jump. Tried on the snack I provided above.

[TheAlmightyBob]

focusable={false} on doesn't seem to help with content jump

I'm not sure the focusable property is actually hooked up (in fact I wonder if it's a mistake that WebViewSharedProps extends ViewProps...). I think this would require changing the native Android code.

[github-actions]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

[steffenkleinle]

Sadly we are still searching for solutions

[huanguolin]

same issue here

[sh-shamsan]

Same issue here in IOS in version 13.6.2

[github-actions]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

[steffenkleinle]

We are still looking for solutions

[github-actions]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

[steffenkleinle]

We are sadly still experiencing this :/

[github-actions]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

[steffenkleinle]

This sadly still happens :/

[lvmtam]

This sadly still happen with me too :/

[KubilayMobile]

Still happening

[samuel-apps]

This solution is for people who need 2 lines of code right now to provide a temporary but relatively stable fix for this issue without installing forks or diving in to native code.

This solution only works when there are no other focusable elements in your scrollview. This solution is particularly useful when users need to be fully able to focus and interact with various elements inside of the webview.

The solution relies on a ref to the ScrollView, a ref to the WebView and a boolean signifying whether the WebView content was loaded.

  // Prevent initial touch jumping ([REDACTED]-78)
  //#region Here be dragons. Thou art forewarned.
  useEffect(() => {
    webViewRef.current?.requestFocus();
    scrollViewRef.current?.scrollTo({ x: 0, y: 0, animated: false });
  }, [loaded]);
  //#endregion

Anyway, long story short; Focus the webview before the user does it, and reset the scroll position immediately after. The user shouldn't see this, but since the webview is now focused, the user can interact with it freely without messing up your scrollview. That is, until another element inside your scrollview needs to be focused, in which case this solution is not suitable.

[ashlyWeiting]

I found a temporary, quick, and forceful way to solve the issue.

Add the following content to node_modules/android/src/main/java/com/reactnativecommunity/webview/RNCWebView.java:

    @Override
    public boolean requestFocus(int direction, Rect previouslyFocusedRect) {
        return false;
    }    

However, this will cause input or textarea elements inside the WebView to lose the ability to focus and bring up the keyboard.

So, I forked a project:
https://github.com/ashlyWeiting/react-native-webview
You need to install my forked repo to use this solution:

yarn add https://github.com/ashlyWeiting/react-native-webview.git

You can modify it based on your needs to control whether the WebView can be focused or not.

Here’s an example:

const webViewScript = `
  (function() {
    const inputs = document.getElementsByTagName('input');
    const textareas = document.getElementsByTagName('textarea');
    const focusableElements = [...inputs, ...textareas];
    window.ReactNativeWebView.postMessage(focusableElements.length > 0 ? 'allow-focus' : 'disallow-focus');
  
    return true;
  })();
`;

const [focusEnabled, setFocusEnabled] = useState<boolean>(false);

const onMessage = (event: WebViewMessageEvent) => {
  const message = event.nativeEvent.data;
  if (message === 'allow-focus') {
    setFocusEnabled(true);
  } else if (message === 'disallow-focus') {
    setFocusEnabled(false);
  }
}

<WebView
  focusEnabled={focusEnabled}
  injectedJavaScript={webViewScript}
/>

If you only need a simple solution where nothing in the WebView can be focused, you can directly set focusEnabled to false:

<WebView
  focusEnabled={false}
/>

Although it’s not the best solution, I hope it helps those who urgently need to resolve this issue.

[duck123ducker]

Here are some experiences from native Android developers. Unfortunately, the ScrollView component in React Native does not expose this property, so there isn't much we can do.😥

Due to focus issues, you only need to add one property to the child controls of ScrollView: android:descendantFocusability = "blocksDescendants"

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:descendantFocusability="blocksDescendants"
    android:orientation="vertical">

The API description is as follows: android:descendantFocusability

Defines the relationship between the ViewGroup and its descendants when looking for a View to take focus.

[steffenkleinle]

#3575 fixes the issue for us. This fork already includes the fix: https://github.com/birdofpreyru/react-native-webview