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

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: .

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: . However, this did not solve this problem.

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

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./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./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?

Share Improve this question edited Oct 26, 2019 at 9:37 Sofyan Thayf 1,3282 gold badges15 silver badges26 bronze badges asked Feb 1, 2017 at 13:05 huonderv 8218 silver badges12 bronze badges

2 seems to be related to this issue: github./facebook/react-native/issues/12070 – Ursin Brunner Commented Feb 1, 2017 at 13:21
probably an issue with the framework, the code doesn't look particularly wrong to me.. – Jake Commented Sep 16, 2019 at 21:11
Seems like a OS related issue. – Anoop Gupta Commented Sep 20, 2019 at 16:18
What version of ReactNative are you using? – Alex Pappas Commented Oct 24, 2019 at 2:19

Add a ment |

2 Answers 2

Sorted by: Reset to default 2 +50

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 ment 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.

This link solution worked for me. For solving this issue make a ponent FixWebView.js and include it in your webview ponent.

Example: FixWebView.js

WebViewScene.js render method

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - React Native WebView html <select> not opening options on Android tablets - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)