Skip to content

React Native project with a simple WebView showing a bug in the HTML select

Notifications You must be signed in to change notification settings

huonderv/react-native-webview-html-select-bug

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

React Native project with a simple WebView showing a bug in the HTML select

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published