React Native WebView html

Question

I am experiencing a very strange problem in React Native's WebView with HTML <select> tags on Android tablets.

For some reason, tapping on the rendered <select> button does not open the options list.

This only happens on Android tablets, irrespective of the Android version. On Android smartphones, however, this bug does not occur and the options list opens as expected.

To reproduce this bug, I created a simple demo app: https://github.com/huonderv/react-native-webview-html-select-bug.

The important code is the following:

index.android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  WebView
} from 'react-native';

export default class WebViewProject extends Component {
  render() {
    return (
      <WebView
        style={styles.container}
        source={{ uri: 'file:///android_asset/simpleselect.html'}}
        startInLoadingState={true}
      />
    );
  }
}

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

AppRegistry.registerComponent('WebViewProject', () => WebViewProject);

simpleselect.html

<!DOCTYPE html>
<html>
  <body>    
    <select>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>

  </body>
</html>

I also tried to replace the WebView with Crosswalk, as described here: https://github.com/grovertb/react-native-crosswalk-webview. However, this did not solve this problem.

Does anyone know how to get this to work in React Native WebView on Android tablets?

Cold Cerberus · Accepted Answer

I'm just following along the thread from this closed issue and it seems to me there are a couple of solutions that may work for you.

First is from this comment by Anthony Dunk :

Adding the class "needsclick" to the select fixed this issue for me on Android.

Second that I found is this from rbravo

I fixed it on my project by detecting when any select element was clicked on the page inside the webview (by injecting some js and using postMessage) then resized the webview by 1px (and back to original size again) in a 1ms timeout. This triggered the render method and the native select menu got on top of the webview (since the whole problem was the native menu opening behind the webview and not showing up). It worked for me!

But then again, some claim that any of the solutions shared din't work for them.

The issue was passed to MIGRATED: html select element not working in WebView on android tablets (#12070) #6, and still got closed without a proper solution. This was referenced to The android is Flash back when i use webview in scrollview #477 which also got Closed from being inactive for more than 2 months.

There may be no proper solution for this currently but do let us know if any of them worked for you.

React Native WebView html <select> not opening options on Android tablets

Tags:

javascript

android

react-native

android-webview

react-native-android

huonderv

1 Answers

Cold Cerberus

Recent Activity

Donate For Us