I have a very strange problem in React Native WebView with HTML <select> tags on Android tablets.
For some reason, clicking on the rendered <select> button does not open the parameter list.
This only happens on Android tablets, regardless of the version of Android. However, on Android smartphones, this error does not occur, and the list of options opens, as expected.
To reproduce this error, I created a simple demo application: https://github.com/huonderv/react-native-webview-html-select-bug .
The important code is as follows:
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 replacing 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 make this work in React Native WebView on Android tablets?