New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

html select element not working in WebView on android tablets #12070

Closed
miestr opened this Issue Jan 25, 2017 · 45 comments

Comments

Projects
None yet
@miestr
Copy link

miestr commented Jan 25, 2017

Description

The select element with regular ng-options is not working correctly on Android tablets: the options are not displayed on click/touch.
My react-native app contains a simple WebView which loads a simple url, for example http://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp
The webpage contains a select element at the bottom, but when I click on it, no options are displayed. At the same time, the multiple select DOES work. The issue found only on Android tablets. On android phones it works.

Reproduction

Create a simple react-native app with simple WebView in it, src prop set to http://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp. Scroll down to selects with dropdown options and click on simple select. Btw, the select DOES work when another input text is in focus (keyboard up).
This is a sample app , but the bug is not reproducable on rnplay because there is no Android tablet.

Additional Information

  • React Native version: 0.40.0, react-native-cli version 2.0.1
  • Platform: bug found on real tablets with Android 5.0.1. Android 5.1.1, tablet emulator with Android 6.0
  • Operating System: Windows
@etluchs

This comment has been minimized.

Copy link

etluchs commented Feb 1, 2017

same problem here :-(

@huonderv

This comment has been minimized.

Copy link

huonderv commented Feb 1, 2017

I am also experiencing the same problem.

To reproduce the bug, I created a small demo app containing a React Native WebView with a basic HTML select markup: https://github.com/huonderv/react-native-webview-html-select-bug

@omnibrain

This comment has been minimized.

Copy link

omnibrain commented Feb 1, 2017

Can confirm, I'm also experiencing this problem on android tablets (tested with a Nexus and a Samsung Tablet). It seems to be a general problem that has nothing to do with Angular or Bootstrap. Even a plain HTML select with no JavaScript or any other magic cannot be opened if running in the WebView. I created a minimal HTML page with just this:

<select name="select-name" id="select-id">
  <option value="1">Apple</option>
  <option value="2">Banana</option>
  <option value="3">Orange</option>
</select>

... yet was not able to open the select. By tapping on the select I can focus it, but it won't open. Other input elements work just fine.

@preinvent

This comment has been minimized.

Copy link

preinvent commented Feb 3, 2017

More complex scenario here but similar issue. I'm using an Android web view to go through an OAuth2 flow. The access control screen has a dropdown which I can't select from, therefore I can't complete the OAUTH2 flow.

@nhayfield

This comment has been minimized.

Copy link

nhayfield commented Feb 8, 2017

i also have this problem. it happens for select boxes and some buttons as well. other buttons appear to work normally. possibly related to: http://stackoverflow.com/questions/14477550/android-javascript-touchstart-event-not-fired-until-zoom-or-scroll-the-page

@brentvatne

This comment has been minimized.

Copy link
Collaborator

brentvatne commented Feb 22, 2017

@preinvent - you shouldn't use WebViews for OAuth because it's insecure, check out https://github.com/openid/AppAuth-Android as an alternative

@omegayal

This comment has been minimized.

Copy link

omegayal commented Mar 6, 2017

I also encounter this issue recently. If the webview is used in a pure Android project, the select element works normally. On the other hand, if the webview is wrapped in the form of the native UI component via SimpleViewManager and used in a RN project, the select element is not working anymore (just the sameas the WebView in react-native). So the problem seems to occur in the RN layer. Does anyone know how to trace down deeper? Thanks.

@farazs

This comment has been minimized.

Copy link
Contributor

farazs commented Mar 6, 2017

Is everyone encountering this issue on 0.40? If so it would be easier to find the root cause.

Is anyone on a version newer or older than 0.40?

@farazs

This comment has been minimized.

Copy link
Contributor

farazs commented Mar 6, 2017

@huonderv I tested your sample app and could not reproduce the bug on a Nexus 9 Android 6.0.0 emulator. Is there a specific tablet emulator on which the bug is reproducible?

@miestr

This comment has been minimized.

Copy link

miestr commented Mar 7, 2017

@farazs I tested the app from huonderv on real tablets - select is not working. Tested on Visual Studio Emulator (10'1 Tablet with android 6.0 - similar to Nexus 10) - select IS working. When I replace the url in android.index.js with http://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp, select is not working again. Weird combination..

@bbeldame

This comment has been minimized.

Copy link

bbeldame commented Mar 13, 2017

Is anyone on a version newer or older than 0.40? @farazs

I have the same issue on react native 0.41.2

@davidperrenoud

This comment has been minimized.

Copy link
Contributor

davidperrenoud commented Mar 13, 2017

Has anyone tried if this bug also appears when using the experimental Nodes Android rendering?

@bbeldame

This comment has been minimized.

Copy link

bbeldame commented Mar 15, 2017

@davidperrenoud
The select element is working great on the experimental Nodes.

(Tested on RN 0.41.2 with a real tablet on android 5.1.1)

@nidongara

This comment has been minimized.

Copy link

nidongara commented Apr 25, 2017

Anyway to fix this?

@brentvatne

This comment has been minimized.

Copy link
Collaborator

brentvatne commented Apr 26, 2017

is this also an issue on Android in general? can someone explain why this is specific to react-native and not just an Android / Android WebView bug?

@farazs

This comment has been minimized.

Copy link
Contributor

farazs commented Apr 26, 2017

I believe I tested it before with a normal webview and did not see the issue. However, I no longer have an Android tablet to test on. Also, the fact that the issue is there on normal react-native but not with Nodes rendering would suggest it's some odd RN bug?

I have created an Android webview sample app that goes to a page with a select element here: https://github.com/farazs/android-webview-form-sample/tree/select_example

Could someone verify that huonderv's sample reproduces the issue on an Android tablet but this sample does not? That would confirm it's a react-native specific issue.

@nidongara

This comment has been minimized.

Copy link

nidongara commented Apr 27, 2017

I have tested https://github.com/farazs/android-webview-form-sample/tree/select_example on Android WebView where it works absolutely fine. React-Native webview is not able render any select tags on a tablet.

@drakmail

This comment has been minimized.

Copy link

drakmail commented Apr 29, 2017

I have same issue in emulator with following settings:

settings

@miestr

This comment has been minimized.

Copy link

miestr commented May 31, 2017

Tried to use FlatUIImplementation (experimental node rendering) - no effect (on a Nexus 7 tablet with 5.1.1).

@davidperrenoud

This comment has been minimized.

Copy link
Contributor

davidperrenoud commented Jun 13, 2017

It seems that this bug doesn't appear when using both React Native 0.45.0 and the Nodes Android rendering (React Native 0.42.0, 0.43.0, 0.44.0 with Nodes had the same bug).

@hramos hramos added the Icebox label Aug 16, 2017

@hramos

This comment has been minimized.

Copy link
Contributor

hramos commented Aug 16, 2017

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

  • Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
  • If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
  • Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

@hramos hramos closed this Aug 16, 2017

@ss44

This comment has been minimized.

Copy link

ss44 commented Sep 16, 2017

Still seeing this issue in react-native 47.0 running on Nexus tablet and Android emulator.

  • Selects with bootstrap form-control do not display items anywhere.
  • Selects with no classes assigned display options top left corner of the screen.
@jiankai82

This comment has been minimized.

Copy link

jiankai82 commented Sep 22, 2017

I can still reproduce the issue on React Native 0.47.1. Can someone please look into it? Any work around would be greatly appreciated.

@ss44

This comment has been minimized.

Copy link

ss44 commented Sep 22, 2017

@jiankai82 While I doubt a solution for older devices is forthcoming a solution I found to help work around the issue was to implement: https://github.com/craftpip/bootstrap-fullscreen-select and then inject javascript around the selects.

While not ideal it solved the problem within our app where we also controlled which pages are rendered.

@jiankai82

This comment has been minimized.

Copy link

jiankai82 commented Sep 29, 2017

@ss44 Thanks for the solution. Unfortunately, for the particular application I am working on, I am unable to change any HTML. I can only change code outside of the webview. Is there any other workaround?

@omnibrain

This comment has been minimized.

Copy link

omnibrain commented Sep 30, 2017

I don't understand why this issue was closed. It's clearly not fixed in the latest release and still affecting people.

@jiankai82

This comment has been minimized.

Copy link

jiankai82 commented Sep 30, 2017

@hramos Could you please reopen this issue? This issue is still not fixed in the latest React Native release. Thanks.

@weremax

This comment has been minimized.

Copy link

weremax commented Nov 7, 2017

Still an issue in version 50.1 on the Android tablet as well this really needs to be reopened. but since it hasn't been I will open a new one when I have a chance. Only works if you select a text field where the keyboard displays then click the select and the drop-down works. Click anywhere else on the form then attempt to select the drop-down; it will not work.

@weremax

This comment has been minimized.

Copy link

weremax commented Dec 7, 2017

started marking thumbs down on the closing message maybe the closer will revisit the issue and reopen this ticket but opened a ticket in the meantime. also sent direct message on twitter to hramos, posted question on discord, posted question on react native twitter account. I will try to get as much attention on this as possible because this is a problem that needs to be resolved for hybrid mobile development not just closed.

@sahrens

This comment has been minimized.

Copy link
Contributor

sahrens commented Mar 13, 2018

This definitely seems to still be an issue....although it is odd that it's fixed in with Nodes rendering. @brentvatne - do you know if many people are using/contributing to the Nodes renderer?

@mdvacca: any idea how to fix this?

@sahrens sahrens reopened this Mar 13, 2018

@brentvatne

This comment has been minimized.

Copy link
Collaborator

brentvatne commented Mar 14, 2018

do you know if many people are using/contributing to the Nodes renderer?

I don't believe so! at least not outside of Facebook

@mrtnzlml

This comment has been minimized.

Copy link

mrtnzlml commented Apr 4, 2018

We have exactly the same issue now on one of the white-labels. React Native version 0.54.4 with Android tablet Pixel C (not sure about other Android tablets though).

@rsommerard

This comment has been minimized.

Copy link

rsommerard commented Apr 24, 2018

I have the same issue with a Nexus . I tested with React Native 0.52 and 0.55 and on two different version of Android (6.0.1 and 7.1.1).
The issue does not appear on mobile devices, only on tablets.

@mattwkelly

This comment has been minimized.

Copy link

mattwkelly commented May 7, 2018

This is still an issue on Android tablets.

@rbravo

This comment has been minimized.

Copy link

rbravo commented May 16, 2018

I think that it has something to do with the overlay of the Android's native select box and the webview.
On a custom tabbed browser I'm building I could test that when trying to open the select box, then changing the tab (the current webview goes to background), the select box shows up! I can even select an item an then go back to the previous tab and the item is selected!

Here goes a screencast showing up what's going on:
androidselectissue

I hope it helps someone to detect the actual problem. =)

@AnthonyDunk

This comment has been minimized.

Copy link

AnthonyDunk commented Jun 25, 2018

Adding the class "needsclick" to the select fixed this issue for me on Android.

@dylanvalade

This comment has been minimized.

Copy link

dylanvalade commented Jun 26, 2018

Fastclick was my problem, which is solved by adding needsclick

@mattwkelly

This comment has been minimized.

Copy link

mattwkelly commented Jul 3, 2018

I'm not using the fastclick module. I see this issue with vanilla react native.

@Johnafriedman

This comment has been minimized.

Copy link

Johnafriedman commented Aug 9, 2018

Same problem. Oddly the select data was displayed after rotating the tablet (Amazon Fire 5)

@rbravo

This comment has been minimized.

Copy link

rbravo commented Aug 14, 2018

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!

@jamonholmgren

This comment has been minimized.

Copy link
Collaborator

jamonholmgren commented Sep 9, 2018

This issue has been migrated to react-native-community/react-native-webview#6 and can be closed.

@viv3kk

This comment has been minimized.

Copy link

viv3kk commented Sep 21, 2018

Adding the class "needsclick" to the select fixed this issue for me on Android.

What is needsclick class ...is it related to fastclick

@kelset

This comment has been minimized.

Copy link
Collaborator

kelset commented Sep 24, 2018

Closing because WebView is getting migrated out of the core repo, you can follow up to the link above in the new repo.

@kelset kelset closed this Sep 24, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment