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?