I can't type into input fields on the webview

[ncesar]

Bug description:
I am trying to type into input fields on a webview page and it simply doesn't work, nothing happens. If I remove the webview component and add a TextField, it works without problems.

To Reproduce:

I am using Expo and in the example below I am trying to type into Google's search input.

import { StyleSheet, SafeAreaView } from 'react-native';

import WebView from 'react-native-webview';


export default function HomeScreen() {
  return (
    <SafeAreaView style={styles.container}>
      <WebView 
        source={{ uri: 'https://www.google.com' }}
        style={styles.webview}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        startInLoadingState={true}
        scalesPageToFit={true}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  }
});

Expected behavior:

Inputs should work

Screenshots/Videos:

Environment:

• OS: macOS Sonoma 14.5
• OS version: Sonoma 14.5
• react-native version: 0.76.2
• react-native-webview version: 13.12.4

[lukasbalaz]

I am experiencing the same issue. Not only I can't type into the input fields but also some buttons don't work in the webview (usually buttons that don't redirect to a different page - for example opening navigation drawer, which I tried on multiple websites and it didn't work).

Funny thing is that if the app is open in development mode in iOS Simulator and I click on an input field in the webview, the keyboard shows up and when I click 'r' on the keyboard, the app reloads.

I tried production mode with npx expo run:ios --configuration Release and it surprisingly worked fine. Then I installed the app in development mode with npx expo run:ios, disabled fast refresh in the app and then started it again, this time with npx expo start -d and currently it works for me and I can even reload the app (by clicking 'r' in the terminal, where npx expo start -d is running).

But then I tried same steps for a different app and it didn't work (even in production mode). Which makes me think that I just got lucky but currently I at least have a way to continue development for the first app.

[saribalorhan]

I’m experiencing the same issue. Can you find anything? @ncesar

[FelipeBohnertPaetzold]

Same issue here, has anyone found a solution?

[anapaulaods]

I'm also experiencing the same issue

[paliari]

I'm also having the same problem.

[saribalorhan]

I found a workaround for this situation. Refreshing the webView seems to be enough for iOS, to focus the webView inputs.

const [webViewKey, setWebViewKey] = useState(0);
const [webViewIsLoaded, setWebViewIsLoaded] = useState(false);

return (
    <WebView
    key={webViewKey}
    ref={webViewRef}
    source={{uri: url}}
    onLoadEnd={() => {
        if (!webViewIsLoaded) {
            setWebViewIsLoaded(true);
            setWebViewKey(webViewKey + 1)
        }
    }}
    allowsLinkPreview={false}
    style={{flex: 1}}
    onMessage={(event) => handleOnMessage(event)}/>
)

[FelipeBohnertPaetzold]

I found a workaround for this situation. Refreshing the webView seems to be enough for iOS, to focus the webView inputs.

const [webViewKey, setWebViewKey] = useState(0);
const [webViewIsLoaded, setWebViewIsLoaded] = useState(false);

return (
    <WebView
    key={webViewKey}
    ref={webViewRef}
    source={{uri: url}}
    onLoadEnd={() => {
        if (!webViewIsLoaded) {
            setWebViewIsLoaded(true);
            setWebViewKey(webViewKey + 1)
        }
    }}
    allowsLinkPreview={false}
    style={{flex: 1}}
    onMessage={(event) => handleOnMessage(event)}/>
)

This worked for me only on the device; I still can't type in the inputs on the simulator.

[saribalorhan]

I found a workaround for this situation. Refreshing the webView seems to be enough for iOS, to focus the webView inputs.

const [webViewKey, setWebViewKey] = useState(0);
const [webViewIsLoaded, setWebViewIsLoaded] = useState(false);

return (
    <WebView
    key={webViewKey}
    ref={webViewRef}
    source={{uri: url}}
    onLoadEnd={() => {
        if (!webViewIsLoaded) {
            setWebViewIsLoaded(true);
            setWebViewKey(webViewKey + 1)
        }
    }}
    allowsLinkPreview={false}
    style={{flex: 1}}
    onMessage={(event) => handleOnMessage(event)}/>
)

This worked for me only on the device; I still can't type in the inputs on the simulator.

I haven't tried it on a device, but it works on the simulator for me.

[mlazari]

Anyone willing to test a fix for this issue, please try these steps:

• replace "react-native-webview": "13.12.4" with "react-native-webview": "github:react-native-webview/react-native-webview#573ce151683296f469de74fb21aa6de8c58d1dce" in your package.json file
• install npm dependencies with npm install / yarn install (depending on which package manager you are using)
• reinstall pods (pod install in the ios folder) or if you are using expo run npx expo prebuild
• rebuild the app (e.g with npx react-native run-ios or if you are using expo with npx expo run:ios; or from Xcode)
• check if this issue is fixed

[mlazari]

This should be fixed in version 13.12.5 by this PR: #3615