Select not working on Android

ionic-v1
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 Likes
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

2 Likes
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)) {
1 Like
14

Yes this seems to fix the issue in GitHub - alongubkin/angular-datepicker: Angular.js Date/Time Picker

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.