react-native-webview / react-native-webview

React Native Cross-Platform WebView
https://github.com/react-native-community/discussions-and-proposals/pull/3
MIT License
6.3k stars 2.95k forks source link

Unable to tap input field or any buttons on screen. #3400

Open TreyThomas93 opened 2 months ago

TreyThomas93 commented 2 months ago

Bug description: I am using the Jitsi Flutter SDK which uses RNCWebView for their Shared Documents screen, and when I run it on Android emulator, everything works fine. But when I run it on physical Android device, nothing on the screen is tappable except the back arrow in the appbar that closes the webview. Running flutter run -v, when I click on the Open Shared Document button and the webview opens, I get the following error:

Flutter Error Log ``` [ +37 ms] D/ConnectivityManager(22827): StackLog: [android.net.ConnectivityManager.sendRequestForNetwork(ConnectivityManager.java:4300)] [android.net.ConnectivityManager.registerDefaultNetworkCallbackForUid(ConnectivityManager.java:4864)] [android.net.ConnectivityManager.registerDefaultNetworkCallback(ConnectivityManager.java:4831)] [ZZ.e(chromium-TrichromeWebViewGoogle.aab-stable-556311633:38)] [ZZ.a(chromium-TrichromeWebViewGoogle.aab-stable-556311633:1)] [org.chromium.android_webview.AwContentsLifecycleNotifier.onFirstWebViewCreated(chromium-TrichromeWebViewGoogle.aab-stable-556311633:24)] [J.N.MFiR_zHY(Native Method)] [org.chromium.android_webview.AwContents.(chromium-TrichromeWebViewGoogle.aab-stable-556311633:375)] [com.android.webview.chromium.k.run(chromium-TrichromeWebViewGoogle.aab-stable-556311633:111)] [Xz0.b(chromium-TrichromeWebViewGoogle.aab-stable-556311633:20)] [Wz0.run(chromium-TrichromeWebViewGoogle.aab-stable-556311633:3)] [org.chromium.base.task.PostTask.c(chromium-TrichromeWebViewGoogle.aab-stable-556311633:17)] [Xz0.a(chromium-TrichromeWebViewGoogle.aab-stable-556311633:29)] [com.android.webview.chromium.WebViewChromiumFactoryProvider.a(chromium-TrichromeWebViewGoogle.aab-stable-556311633:3)] [com.android.webview.chromium.WebViewChromium.init(chromium-TrichromeWebViewGoogle.aab-stable-556311633:327)] [android.webkit.WebView.(WebView.java:448)] [android.webkit.WebView.(WebView.java:368)] [android.webkit.WebView.(WebView.java:350)] [android.webkit.WebView.(WebView.java:337)] [android.webkit.WebView.(WebView.java:327)] [com.reactnativecommunity.webview.RNCWebView.(RNCWebView.java:86)] [com.reactnativecommunity.webview.RNCWebViewManagerImpl.createRNCWebViewInstance(RNCWebViewManagerImpl.kt:62)] [com.reactnativecommunity.webview.RNCWebViewManagerImpl.createViewInstance(RNCWebViewManagerImpl.kt:66)] [com.reactnativecommunity.webview.RNCWebViewManager.createViewInstance(RNCWebViewManager.java:50)] [com.reactnativecommunity.webview.RNCWebViewManager.createViewInstance(RNCWebViewManager.java:35)] [com.facebook.react.uimanager.ViewManager.createViewInstance(ViewManager.java:183)] [com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:115)] [com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:281)] [com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:194)] [com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:1110)] [com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1081)] [com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)] [com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)] [com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)] [android.view.Choreographer$CallbackRecord.run(Choreographer.java:1299)] [android.view.Choreographer$CallbackRecord.run(Choreographer.java:1309)] [android.view.Choreographer.doCallbacks(Choreographer.java:923)] [android.view.Choreographer.doFrame(Choreographer.java:847)] [android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1283)] [ +4 ms] D/ConnectivityManager(22827): StackLog: [android.net.ConnectivityManager.sendRequestForNetwork(ConnectivityManager.java:4300)] [android.net.ConnectivityManager.sendRequestForNetwork(ConnectivityManager.java:4342)] [android.net.ConnectivityManager.registerNetworkCallback(ConnectivityManager.java:4724)] [ZZ.e(chromium-TrichromeWebViewGoogle.aab-stable-556311633:111)] [ZZ.a(chromium-TrichromeWebViewGoogle.aab-stable-556311633:1)] [org.chromium.android_webview.AwContentsLifecycleNotifier.onFirstWebViewCreated(chromium-TrichromeWebViewGoogle.aab-stable-556311633:24)] [J.N.MFiR_zHY(Native Method)] [org.chromium.android_webview.AwContents.(chromium-TrichromeWebViewGoogle.aab-stable-556311633:375)] [com.android.webview.chromium.k.run(chromium-TrichromeWebViewGoogle.aab-stable-556311633:111)] [Xz0.b(chromium-TrichromeWebViewGoogle.aab-stable-556311633:20)] [Wz0.run(chromium-TrichromeWebViewGoogle.aab-stable-556311633:3)] [org.chromium.base.task.PostTask.c(chromium-TrichromeWebViewGoogle.aab-stable-556311633:17)] [Xz0.a(chromium-TrichromeWebViewGoogle.aab-stable-556311633:29)] [com.android.webview.chromium.WebViewChromiumFactoryProvider.a(chromium-TrichromeWebViewGoogle.aab-stable-556311633:3)] [com.android.webview.chromium.WebViewChromium.init(chromium-TrichromeWebViewGoogle.aab-stable-556311633:327)] [android.webkit.WebView.(WebView.java:448)] [android.webkit.WebView.(WebView.java:368)] [android.webkit.WebView.(WebView.java:350)] [android.webkit.WebView.(WebView.java:337)] [android.webkit.WebView.(WebView.java:327)] [com.reactnativecommunity.webview.RNCWebView.(RNCWebView.java:86)] [com.reactnativecommunity.webview.RNCWebViewManagerImpl.createRNCWebViewInstance(RNCWebViewManagerImpl.kt:62)] [com.reactnativecommunity.webview.RNCWebViewManagerImpl.createViewInstance(RNCWebViewManagerImpl.kt:66)] [com.reactnativecommunity.webview.RNCWebViewManager.createViewInstance(RNCWebViewManager.java:50)] [com.reactnativecommunity.webview.RNCWebViewManager.createViewInstance(RNCWebViewManager.java:35)] [com.facebook.react.uimanager.ViewManager.createViewInstance(ViewManager.java:183)] [com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:115)] [com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:281)] [com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:194)] [com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.dispatchPendingNonBatchedOperations(UIViewOperationQueue.java:1110)] [com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1081)] [com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)] [com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)] [com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)] [android.view.Choreographer$CallbackRecord.run(Choreographer.java:1299)] [android.view.Choreographer$CallbackRecord.run(Choreographer.java:1309)] [android.view.Choreographer.doCallbacks(Choreographer.java:923)] [android.view.Choreographer.doFrame(Choreographer.java:847)] [android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1283)] ```

And when I run adb logcat for the same event I get the following:

ADB Error Log ``` 04-12 19:46:13.363 1107 1733 E EffectsConfig: Invalid type sec_voice_communication: 04-12 19:46:13.363 1107 1733 E EffectsConfig: 04-12 19:46:13.363 1107 1733 E EffectsConfig: 04-12 19:46:13.367 987 4786 E sm8250_platform: platform_check_backends_match: Invalid snd_device = 04-12 19:46:13.368 987 4786 E voice : voice_is_in_call_rec_stream: input stream is NULL 04-12 19:46:13.368 987 4786 E voice : voice_is_in_call_rec_stream: input stream is NULL 04-12 19:46:13.400 987 4786 E soundtrigger: audio_extn_sound_trigger_update_stream_status: invalid input device 0x0, for event 3 04-12 19:46:13.456 13625 13625 E ocessService0:1: Not starting debugger since process cannot load the jdwp agent. 04-12 19:46:14.858 1040 2180 E FRONT_AF_DEBUG: [cam_id_0][CMG_EFL] Front_UpdateAfStatus (line 304) : AF status 0x2 0x3 04-12 19:46:14.858 1040 2180 E FRONT_AF_DEBUG: [CMG_AF_NOTI]MovieCafPhaseFindGoal(). curr(215), Estgoal(222) OffsetGoal(222) 04-12 19:46:15.049 1040 2180 E FRONT_AF_DEBUG: [cam_id_0][CMG_EFL] Front_UpdateAfStatus (line 304) : AF status 0x3 0x2 04-12 19:46:15.049 1040 2180 E FRONT_AF_DEBUG: [FA_EXIF] : 4324 69208209654546510 4324 65267547095695438 4324 58230646908125262 5096 0 228 60679740339519566 215 59923276339609678 215 59360326386188366 215 61330651223162958 215 61049176246452302 1000 0 04-12 19:46:15.049 1040 2180 E FRONT_AF_DEBUG: [CMG_EFL] Front_LogPrintAfResult (line 404) : cur_position 222 , bv -25 , af_method 3 , roi_type 2, fd_cnt 1 04-12 19:46:15.049 1040 2180 E FRONT_AF_DEBUG: [cam_id_0][CMG_EFL] Front_UpdateExifInfo (line 3333) : cur_position 222, bv -25, af_method 3, fd_cnt 1 04-12 19:46:15.199 1040 2182 E FRONT_AF_DEBUG: [cam_id_0][CMG_EFL] Front_UpdateAfStatus (line 304) : AF status 0x2 0x3 04-12 19:46:15.200 1040 2182 E FRONT_AF_DEBUG: [CMG_AF_NOTI]MovieCafPhaseFindGoal(). curr(222), Estgoal(218) OffsetGoal(218) 04-12 19:46:15.400 1040 2181 E FRONT_AF_DEBUG: [cam_id_0][CMG_EFL] Front_UpdateAfStatus (line 304) : AF status 0x3 0x2 04-12 19:46:15.400 1040 2181 E FRONT_AF_DEBUG: [FA_EXIF] : 215 61049176246452302 1000 0 4311 227713264748856732 4311 408983149750519840 4311 62646341439848526 4318 70052625994743886 4318 69771245507313742 4318 67801062404259918 4318 70897085284614222 5096 0 04-12 19:46:15.400 1040 2181 E FRONT_AF_DEBUG: [CMG_EFL] Front_LogPrintAfResult (line 404) : cur_position 218 , bv -25 , af_method 3 , roi_type 0, fd_cnt 0 04-12 19:46:15.400 1040 2181 E FRONT_AF_DEBUG: [cam_id_0][CMG_EFL] Front_UpdateExifInfo (line 3333) : cur_position 218, bv -25, af_method 3, fd_cnt 0 04-12 19:46:16.592 987 1903 E soundtrigger: audio_extn_sound_trigger_update_stream_status: invalid input device 0x0, for event 2 ```

To Reproduce:

As far as reproducible code, I don't have anything readily available because one must have an entire jitsi server running with Etherpad enabled and running. But if you do, then the steps to reproduce are:

  1. Start a meeting
  2. Once in the meeting, click the ... at the bottom of the screen.
  3. Scroll to the bottom of the bottom sheet, and look for the "Open shared document" button.
  4. Click that button.
  5. Webview will open and will show loading...
  6. Once done loading, user will see rich text editor bar at the top, a body of text in the middle, and a bottom bar with some additional buttons. For me, none of these UI components are clickable.

Expected behavior:

That when the webview is opened, all UI components are responsive, reactive and clickable. Able to tap the body and a keyboard appears.

Environment:

[√] Flutter (Channel stable, 3.19.3, on Microsoft Windows [Version 10.0.22621.3447], locale en-US)
    • Flutter version 3.19.3 on channel stable at C:\dev\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ba39319843 (5 weeks ago), 2024-03-07 15:22:21 -0600
    • Engine revision 2e4ba9c6fb
    • Dart version 3.3.1
    • DevTools version 2.31.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\TreyT\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-b2043.56-10550314)
    • All Android licenses accepted.

[√] Android Studio (version 2023.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.7+0-b2043.56-10550314)

[√] Connected device (4 available)
    • SM G986U (mobile) • R5CN10647FZ • android-arm64  • Android 13 (API 33)

I am using Jitsi Meet Flutter SDK version 0.3.0, and it look's like they are using "react-native-webview": "13.5.1" for webview.

Thanks!

AntonL-tech commented 2 months ago

Similar issue in react native app on Android only. Any updates?

TreyThomas93 commented 2 months ago

The same issue. Any updates?

No updates so far. Was able to rule out being a Flutter issue though.

AntonL-tech commented 1 month ago

@TreyThomas93 this https://github.com/react-native-webview/react-native-webview/issues/2243#issuecomment-1033512816 fix the issue

davidam123 commented 1 month ago

unfortunately I'm still facing this problem and nestedScrollEnabled didn't solve this problem

Thibaut-Fatus commented 1 month ago

@nicolasweisslinger

Thibaut-Fatus commented 1 month ago

The issue can be avoided by adding injecting manually the javascript in the html content instead of using the injectedJavaScript property

by changing

const getHtml = () => `
    <html><body><div><button onclick="handleClick()">click me</button></html>
`;
const injectedJavascript = `
    function handleClick() {
        window.alert('clicked');
    }
`;

const Component = () => {
    const html = getHtml();
    return <WebView source={{ html, baseUrl: 'http://localhost' }} injectedJavascript={injectedJavascript} />
};

to

const getHtml = (injectedJavascript) => `
    <html><body><div><button onclick="handleClick()">click me</button><script>${injectedJavascript}</script></html>
`;
const injectedJavascript = `
    function handleClick() {
        window.alert('clicked');
    }
`;

const html = getHtml(injectedJavascript)

const Component = () => {
    const html = getHtml(injectedJavascript);
    return <WebView source={{ html, baseUrl: 'http://localhost' }} />
};

I made a snack to reproduce the issue, however it seems to be fixed in the latest version of react-native-webview, and we cannot use the expo recommended one in snacks since the metro config seems outdated.