Ionic-framework: Ionic Select not working when Chrome developer tools is open

Created on 14 Sep 2016  ·  20Comments  ·  Source: ionic-team/ionic-framework

picture Fikitout

Most helpful comment

Make "touchmove touchstart" event.stopPropagation().

It's really a bug in chrome.
Without ionic,without angular,let's make a simple page like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>bug:select on chrome</title>
</head>
<body>
    <select id="select">
         <option value="1">团购套餐</option>
         <option value="2">代金券</option>
     </select>
</body>
</html>

Open PC chrome(version 53 or above),it works.Then open F12,it works.Then open "toggle device toolbar"(mobile model,shortcut key"Ctrl+Shift+M"),it doesn't work!
It's a bug on chrome _mobile_,when I debug on really mobile device with ionic,console providing me an trail:

Handling of 'touchmove' input event was delayed for 2147483647 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responive.

Maybe when I click on the select,ion-content listen the touch event to make scroll active.(Ionic scroll intensify this bug.)
So I try 

app.directive('select',function(){ //same as "ngSelect"
    return {
        restrict: 'E',
        scope: false,
        link: function (scope, ele) {
            ele.on('touchmove touchstart',function(e){
                e.stopPropagation();
            })
        }
    }
})

It works!
_*We just want to trigger click event,but touch is catched by parent element. *_
In really mobile device,it work links normal.But in PC dev model,this bug is still happen,all we can do is just to close the "toggle device toolbar" temporary.

picture dingdong-io on 30 Sep 2016
👍3

All 20 comments

This also occurs in Ionic v1.3.1 in latest Chrome (64bit, Kubuntu) via ionic serve.

tomchiverton picture tomchiverton on 15 Sep 2016

@Fikitout Is this for Ionic 1 or Ionic 2? Thanks!

jgw96 picture jgw96 on 15 Sep 2016

@jgw96 I can confirm it's Ionic 1

tomchiverton picture tomchiverton on 16 Sep 2016

Vote +1, need to get the fix as well!

andrefromberlin picture andrefromberlin on 16 Sep 2016

Also, just to be sure, this only happens when chrome dev tools is open correct? When the app is installed to the device or deployed in the browser without dev tools open everything is fine?

jgw96 picture jgw96 on 16 Sep 2016

Only with dev tools open and mobile toolbar on, yup.

Tom
Sent from my phone.

On 16 September 2016 15:49:42 BST, Justin Willis [email protected] wrote:

Also, just to be sure, this only happens when chrome dev tools is open
correct? When the app is installed to the device or deployed in the
browser without dev tools open everything is fine?

You are receiving this because you commented.
Reply to this email directly or view it on GitHub:
https://github.com/driftyco/ionic/issues/8073#issuecomment-247620233

tomchiverton picture tomchiverton on 16 Sep 2016

Yeah, only when dev tools is open and yes its ionic 1

Fikitout picture Fikitout on 17 Sep 2016

+1, I need to close it and then open it again for console logs.

torukMnk picture torukMnk on 19 Sep 2016

This must have been caused by a recent change in Chrome, as we haven't changed our Ionic library version between when it last worked and when it started being broken...

tomchiverton picture tomchiverton on 20 Sep 2016

+1. Same observation here. Annoying, but not debilitating.

walkingriver picture walkingriver on 20 Sep 2016

Hello all! After further review of this issue this bug seems to be a bug in chrome and not Ionic. Because of this I will be closing this issue for now. Thanks for using Ionic!

jgw96 picture jgw96 on 20 Sep 2016

Seriously. Your framework does not work in the most popular non-device development environment, and you will not even sponsor and upstream a bug in Chrome ?

Fine. Every one should go jump and vote/comment/star this : https://bugs.chromium.org/p/chromium/issues/detail?id=648966

Can you guess what Google will say ? Maybe "fix your framework" ?

tomchiverton picture tomchiverton on 21 Sep 2016

(now confirmed that Ionic does not work in mobile preview mode in Chrome on Mac, Windows or Linux)

tomchiverton picture tomchiverton on 29 Sep 2016
👍1

Make "touchmove touchstart" event.stopPropagation().

It's really a bug in chrome.
Without ionic,without angular,let's make a simple page like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>bug:select on chrome</title>
</head>
<body>
    <select id="select">
         <option value="1">团购套餐</option>
         <option value="2">代金券</option>
     </select>
</body>
</html>

Open PC chrome(version 53 or above),it works.Then open F12,it works.Then open "toggle device toolbar"(mobile model,shortcut key"Ctrl+Shift+M"),it doesn't work!
It's a bug on chrome _mobile_,when I debug on really mobile device with ionic,console providing me an trail:

Handling of 'touchmove' input event was delayed for 2147483647 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responive.

Maybe when I click on the select,ion-content listen the touch event to make scroll active.(Ionic scroll intensify this bug.)
So I try 

app.directive('select',function(){ //same as "ngSelect"
    return {
        restrict: 'E',
        scope: false,
        link: function (scope, ele) {
            ele.on('touchmove touchstart',function(e){
                e.stopPropagation();
            })
        }
    }
})

It works!
_*We just want to trigger click event,but touch is catched by parent element. *_
In really mobile device,it work links normal.But in PC dev model,this bug is still happen,all we can do is just to close the "toggle device toolbar" temporary.

dingdong-io picture dingdong-io on 30 Sep 2016
👍3

@dingdong-io , you are right. I've proved and It's a Chrome's bug.
And your solution worked for me.

andreshg112 picture andreshg112 on 11 Oct 2016

Please re-open.
Even in Google Chrome releases post their fix, Ionic apps with select's do not work. Testing here with Chromium 56.0.2889.0 (64-bit Linux) the work around above (in Ionic 1) does not work.

Sites like diffchecker.com do work in Chromium mobile view fine (and didn't before).

tomchiverton picture tomchiverton on 12 Oct 2016

Chrome unstable (Version 55.0.2883.9 dev (64-bit Linux)) also still has this issue for 'ionic serve' pages, but not for sites like diffchecker.com

tomchiverton picture tomchiverton on 12 Oct 2016

Hello,
I have same issue on ionic 1.3.1 with Chrome web inspector + device toolbar on, select options are not displayed when I click on the select element (working fine on device).
But single select element outisde ionic and angular (example provided by dingdong-io) works fine for me on web inspector + device toolbar.
Chrome stable release 54.0.2840.59 m

The "workaround" with select directive fixes it though.

peterzebird picture peterzebird on 17 Oct 2016

a possible workaround is using keyboard to select items in list when testing. Up and Down can be used after clicking the select item.

raykin picture raykin on 18 Oct 2016
👍1

Ionic have ack'd the issue, and a real fix is in the works : https://twitter.com/maxlynch/status/789200560079507459

tomchiverton picture tomchiverton on 21 Oct 2016
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

brandyscarney picture brandyscarney  ·  3Comments
danbucholtz picture danbucholtz  ·  3Comments
giammaleoni picture giammaleoni  ·  3Comments
Macstyg picture Macstyg  ·  3Comments
brandyscarney picture brandyscarney  ·  3Comments