Skip to content

Latest commit

 

History

History
85 lines (67 loc) · 2.55 KB

README.md

File metadata and controls

85 lines (67 loc) · 2.55 KB

React Native WebView <select> Bug on Android Tablets

##Description The HTML <select> tag does not work in React Native WebView on Android tablets, i.e. clicking on the select button does not open the options list.

##Tested Devices:

  • Samsung Galaxy Tag S2 (SM-T810)
  • Nexus 7

##How to Reproduce the Bug The bug can be reproduced using the demo React Native app in this repository:

git clone https://github.com/huonderv/react-native-webview-html-select-bug.git
cd react-native-webview-html-select-bug
npm install
react-native run-android

The demo app includes a basic WebView in index.android.js, which renders a simple HTML <select> (see code below).

##Code 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>

##Screenhots

Smartphone

On an Android smartphone, the select works as expected:

1. Initial 2. Tap on select button 3. List of options opens
Initial Tap on select button List of options opens

Tablet

However, on an Android tablet, tapping on the select button does not open the options list:

1. Initial 2. Tap on select button 3. Nothing happens
Initial Tap on select button Nothing happens