Select not working on Android


#1

Hi everybody.

Im using the current version of ionic. For Login i like to add a simple select / option combination.

<select ng-change="change()" ng-model="login.group">
                    <option value="-1">Bitte auswählen</option>
                    <option ng-repeat="group in groups" value="{{$index}}">{{group.name}}</option>
                </select>

I works well on chrome but running this on a nexus 4 ( android 4.4 ) the select box appears but its not clickable

on the console i get this output

tapElement SELECT ng-pristine ng-valid ionic.js:2092
preventGhostClick isRecentTap SELECT 

Anyone else has this problem ?


#2

Ah damn
just after creating the topic i found this

if i remove the e.preventDefaults or just remove the select part of the if it works


#3

Hi Urbiwan,
I’m having the same issue on android. I have 2 select, both not reacting in any way, not even a console output… One select is plain populated by normal options and the other one gets its content from a service, but both are not working.

How exactly did you fix this issue?

Thanks


#4

Look for this statement in ionic.js

if(ele.tagName === 'INPUT' || ele.tagName === 'TEXTAREA' || ele.tagName === 'SELECT') {
      ele.focus();
      e.preventDefault();
    } else {
      blurActive();
    }

remove the SELECT part from the IF statement


#5

Really curious if someone from ionic is going to chime in on this.

I would think that making this change could break something somewhere else?


#6

I just ran into this very annoying problem.

Since there was no ticket for the problem I’ve create one:

Hopefully it will get solved soon.


#7

Sorry I didn’t see this earlier, but I just committed a change that removes the select element from tap checking:

Please comment on this github issue if any other related problems are found:

Thanks!


#8

As far as I understood you last post, this issue should be fixed now.

However, on my Nexus 4 this is also still broken in v1.0.0.beta.1


#9

I just found out, that the select just does not work on my modal. On a normal ion-content it works quite well.


#10

Have the same problem

any quick fix ?


#11

Can you guys try it with the nightlies? If not, can you post a code sample?


#12

I´m using the workaround ( using div instead of label ) mentioned in the issue https://github.com/driftyco/ionic/issues/836

works fine for me now

Regards


#13

On Android Internet brower select work with ionic beta 5. But not in beta 6 and beta 7. The reason is;

ionic.js beta 5;

if( !ionic.tap.isTextInput(e.target) || tapLastTouchTarget !== e.target ) {

ionic.js beta 7

if( (!ionic.tap.isTextInput(e.target) || tapLastTouchTarget !== e.target) && !(/^(select|option)$/i).test(e.target.tagName) ) {

When you delete select in if statement, select will be work on android browser.

The final code is;

if ((!ionic.tap.isTextInput(e.target) || tapLastTouchTarget !== e.target) && !(/^(option)$/i).test(e.target.tagName)) {

#14

Yes this seems to fix the issue in https://github.com/alongubkin/angular-datepicker


#15

I am testing on android 2.3 and select is not working for me. Is this still a problem on v1.0.0-beta.13?

It works in Chrome. It also works with plain cordova w/o ionic.

Thanks


#16

nope its a issue in the Chromium Engine in the Default browser. I testet on a Nexus 4 with Android 4.4.4 and it works. On S4 with Android 4.4.2 i have the same issue


#17

Thanks azad11. Is there a way to work around this, like change default browser, upgrade chromium engine or something? I have not customized my app - just started with the example todo app and build on top of it.

This is my first foray in ionic/hybrid world and I am still learning.


#18

Nope, u cant change the Chromium Engine.

You can build ur dropdown in a modal.