Ionic-framework: Issue on the touch event on the different select tag

[perscrew]

Hi, you 've got an important bug with the last ionic 1.3.1 version on the touch event on each select.

On Android 6.0 and Chrome 52.0.2743.98, the different select cannot be displayed.

On previous Android version and Chrome desktop browser it's working fine.

[jgw96]

Hello! Would you be able to provide a repo, plunker or code snippet I can use to reproduce this issue? Thanks for using Ionic!

[perscrew]

Hello, I tried a lot things to fix the problem and I 'm stuck. I'm wondering if the problem is not bound with chrome version and the Android build.

I downgraded the ionic cli and lib version and I got the similar issue. Before it was working, the same apk I pulished 2 weeks ago was working : https://play.google.com/store/apps/details?id=fr.tdsoft.movie.tv.marker . Now it didn't work on my device.

Here you will find some snippet but this is really a basic form :

<label class="item item-input item-select"> <div class="input-label"> {{ 'SETTINGS_ORDER_MOVIE' | translate }} </div> <select ng-options="(option.name | translate) for option in sortTypes track by option.id" ng-model="settings.sortMovieType" ng-change="updateSettings()"> </select> </label>

In the example above the select list item native is not displayed.

Note that I used Sass to generate my css styles on the project :
1) ionic setup sass
2) ionic serve
3) ionic run android

But I tried to include directly the default css to check if the issue was bound to the sass process generation. Same error.

Here you will find the different js lib I used :
angular-translate
angular-translate-loader-static-files
ngCordova

Do you get enougth information to reproduce this issue ?

[jgw96]

Hello, thanks for the info! So I just tested with a Moto X 2014 running Android 5.1.1, a Nexus 7 2013 running Android 6.1.1 and a Nexus 6 running Android 7.0 and I cannot seem to reproduce this issue on any of those devices. I also downloaded your app on my Nexus 6 and tried to reproduce it their, but unfortunately it does not seem to launch for me (gets past the splashscreen and then just shows a white screen).

[perscrew]

Hello, do you get the possibility to try on a Android 6.0.0 build ? Do you get Chrome on your Nexus 6 ?

For the app, I have to submit a new version on the play store because String startwith function is missing for browser not compliant wish ES6. I will upload a new version in the journey and will ping you back.

But for the moment, I don't know what to do. I'm going to make a new blank project and add a select in the template to verify if the behavior is similar.

I reproduced the error with a new blank project :
1) ionic start ionic-test sidemenu
2) update www/templates/login.html with :

<ion-modal-view> <ion-header-bar> <h1 class="title">Login</h1> <div class="buttons"> <button class="button button-clear" ng-click="closeLogin()">Close</button> </div> </ion-header-bar> <ion-content> <form ng-submit="doLogin()"> <div class="list"> <label class="item item-input"> <span class="input-label">Username</span> <input type="text" ng-model="loginData.username"> </label> <label class="item item-input"> <span class="input-label">Password</span> <input type="password" ng-model="loginData.password"> </label> <label class="item item-input"> <span class="input-label">Select</span> <select> <option>test 1</option> <option>test 2</option> </select> </label> <label class="item"> <button class="button button-block button-positive" type="submit">Log in</button> </label> </div> </form> </ion-content> </ion-modal-view>

3) ionic platform add android
4) ionic run android

Select is not fired on touch event.

Ionic cli : 1.7.16, ioni clib : 1.3.1

[Amex22]

Hi !
Same pb, select doesn't work anymore on Android and doesn't "open" when touch. (nothing in the console, no error msg).

[Amex22]

@perscrew If I remove the position:absolute on the .item-select select class, I can click on the "value" and the select open. Can you test if that the same for you ? seems to be a css pb.

[perscrew]

Hi @Amex22 , this is better when I removed position:absolute on the .item-select select and position:absolute on &:after . The select seems to display but I have to touch a specific part of the tag to open the select.

You are right, it looks like a css bug related to the element position.

However this solution is not acceptable , it doesn't work correctly for me.

I tried a dirty hack with an angular directive and I got the same issue :

Directive
.directive('selectFix', function($rootScope, $ionicTabsDelegate) { return { restrict: 'A', link: function($scope, $element) { $element.one('touchstart', function(event) { $element.triggerHandler("click"); event.preventDefault(); }); } }; })
Html Form.
<select ng-options="(option.name | translate) for option in sortTypes track by option.id" ng-model="settings.sortMovieType" ng-change="updateSettings()" select-fix> </select>

[Amex22]

@perscrew That was not a solution, I'm trying to fix the same problem right now, don't have the solution for now but our tests my help someone to find and fix the bug ;)

[perscrew]

You are right @Amex22 :) . Do you test on a Android 6.0.0 build too ?

[Amex22]

Device : OP2 Android 6.0.1
Ionic installed platforms : android 5.1.1

Cordova CLI: 6.3.1
Ionic Framework Version: 1.2.4
Ionic CLI Version: 2.0.0
Ionic App Lib Version: 2.0.0-beta.20

[jgw96]

Hello! Thanks for all the info! So all my devices except for my Nexus 6 are running the standard chrome webview (that any android device running 5.0 and up comes with by default) version 52. My Nexus 6 is running the beta chrome webview and is therefore on version 53. I have tried to reproduce with all of my devices and unfortunately cant seem to repro. Also @perscrew the startsWith method has been supported on chrome since version 36, so I would look elsewhere for the issue in your app.

[perscrew]

Hello, so what can we do to help you ?

Could you try to debug an Android 6.0.0 emulator with Chrome dev tools ?

I'm really disappointed because I cannot use my own app :(

[jgw96]

Hello! I cannot seem to be able to debug your app because it is not a debuggable apk. Sorry about that.

[perscrew]

I debugued the blank project I mentionned above with Chrome Dev tools.

I reproduced the error with a new blank project :
1) ionic start ionic-test sidemenu
2) update www/templates/login.html with a select tag
3) ionic platform add android
4) ionic run android

I agree with @Amex22, check the screenshot here : http://prntscr.com/cfo63g

It's working fine when setting a position:relative on the class.

[Amex22]

I have tried your test on a blank project @perscrew , same pb with the select tag.

1) ionic start ionic-test sidemenu
2) paste the ionic select doc Lightsaber example in www/templates/playlists.html
3) ionic platform add android
4) ionic run android

@jgw96 thanks helping us, hope you will be able to repro and help us.

[Amex22]

Seems there is a select trigger, but only on a small area (red zone on the screenshot). Do you confirm @perscrew ? Need to try a few times.

http://prnt.sc/cfp0ce

[Amex22]

I just.. don't understand.. it now works for me, the test project and in my app...

The only thing I did was to test on iOS. That was the first time for an iOS test. And now it works also for android. So I removed my app from my device, and install it again, and it worked... this is very strange.

[jgw96]

@Amex22 thanks for doing so much testing. Hmm that is strange, you made no code changes at all?

[Amex22]

not any ! git status is empty. Only compile and run ios version, then remove the android app from the device and compile again for android... i just don't understand. (no updates or anything else neither)

[Amex22]

I am working on an app that i have started a long time ago. everything was working. Then I decided to updates everything (ionic, libs, etc..) and the select was not working anymore on android. Until my first ios test and the app remove/re-run

update : that is strange, because I had the bug with the fresh test project

[jgw96]

Hmmm, its possible that something did not get updated on the cordova side of things and removing and re-building the app fixed it. @perscrew are you still having the issue?

[perscrew]

That's very strange I rebuild on IOS 2 days ago, and I still get the problem. I ran this command too because I thought it was related to cordova : npm uninstall -g cordova, npm install -g cordova => Same error...

Worst I downloaded another app build with Ionic 1 (Popety) : https://play.google.com/store/apps/details?id=com.popety.transparent
Same error select are displayed only on the red area that @Amex22 as mentioned.

Any idea ? :(

[jgw96]

@perscrew What android device are you using to test? Also, can you reproduce the issue on another android device?

[perscrew]

I've got a Sony xperia M5 aqua dual. I tested on some collegues device running on Android 6 it's working...

[jgw96]

Hmm thats very interesting. Can you confirm that their devices are running the same version of the chrome webview that your xperia is?

[perscrew]

Yes one got the same Chrome webview version but a 6.0.1 android build.

@Amex22 could you please telle me wich minSdk and targetSdk you have specified in your AndroidManifest.xml ?

[Amex22]

<uses-sdk android:minSdkVersion="16" android:targetSdkVersion="23" />

[perscrew]

OK thank you @Amex22. I tried many configuration with target sdk and min sdk, same error...

I'm going to implement a workaround with css and event triggering...

[jgw96]

@perscrew Just to confirm it did work on your colleague's device? If so, what device are they using? Also, would you be able to test this on a 6.0 android emulator?

[perscrew]

Asus Zenphone 2 for my collegue. Yep I'm going to test on a 6.0 emulator, will keep u in touch...

[perscrew]

lol big joke, google just pushed an update on android system webview, everything is OK now...

However it seems working just before the update by replacing the <label> tag with a <div> to surround the select.

[jgw96]

Wow, very interesting haha 😄 Guess it was a bug in the webview. Thanks for all the testing and patience! Since this seemed to be a bug in chrome webview and not an Ionic bug I am going to close this issue for now. Thanks for using Ionic!

[Amex22]

I also got an update just after the bug resolution...