Ionic-framework: Select/option doesn't work in chrome 53 for touch events

[asim-qb]

Short description of the problem:

Select/option doesn't work in chrome 53 for touch inputs. (Through chrome dev tools and native devices.)

What behavior are you expecting?

Select element should work without any issues in chrome 53+ for touch events.

Steps to reproduce:

1. Try opening country drop-down in this pen in chrome 53 through dev tools or android chrome 53 version.

Other information:

• Related issue which is closed: https://github.com/driftyco/ionic/issues/8006
• Chrome won't perform default action on un-trusted events anymore
• Like: ele.dispatchEvent(clickEvent); // (line 2865) in

function triggerMouseEvent(type, ele, x, y) {
  var clickEvent = document.createEvent("MouseEvents");
  clickEvent.initMouseEvent(type, true, true, window, 1, 0, 0, x, y, false, false, false, false, 0, null);
  clickEvent.isIonicTap = true;
  ele.dispatchEvent(clickEvent); // (line 2865)
}

• I think this will effect other some element's default behaviour too.
• Tried with data-tap-disabled = "true" for parent element, but issue's still there.

Which Ionic Version? 1.x or 2.x

Provided pen has 1.3.1. I use 1.1.0

Plunker that shows an example of your issue

http://plnkr.co/edit/TJSmtfyOrLUNJWmjsADN?p=preview

[mlynch]

Thanks, taking a look and seeing about getting a fix here ASAP

[jgw96]

Alright here are my findings so far on this issue:

1. This is definitely a legit issue on Chrome for android 53 and up. This means that any Android device running 5.0 and up is gonna be affected by this issue.
2. A possible workaround is wrapping the select component in a div with the data-tap-disabled attribute set to true like this <div data-tap-disabled="true"><select></select></div>. This disables the click handling that causes the above issue for that component. The only issues with this is how it affects Android older than 4.4.2 and iOS. In Ionic 2 we do not do any fancy click handling and it works perfect back to Android 4.4.2 and on iOS 8 and above.
3. You can dynamically add the data-tap-disabled attribute to a div by detecting the platform and version using the ionic.Platform class. Doing this enables you to do things like disabling the tap stuff on newer android but still having the tap stuff on older android.

[washington-guedes]

I created a local file test.html:

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<style type="text/css">
select {
    width: 100%;
    font-size: 120px;
}
</style>

And it doesn't open the select in Chrome DevTools (any mobile mode). It is a bug out of ionic scope, ref SO link and Chromium link.

[Jicmou]

Hi,
Just want to say that I had the same issue, and the fix proposed by @jgw96 worked for me.

I did the same kind of test as @WashingtonGuedes . The select tag was working alone. But as soon as I enabled the ionic library, the bug appeared again. So there was an issue in the ionic scope, although there is still a bug with select in chrome dev mode with the dropdown opening completly out of the page, but that's another story.

Thank you guys

[zorgster]

This is not a bug in Chrome - it is a security feature.

I have seen this warning in Chrome DevTools for a few weeks (didn't have time to investigate it) but I was using Ionic 1.2.4 - I updated last week to Ionic to 1.3.x and it was still there. I found that this warning always appeared when I clicked on the option select:

A DOM event generated from JavaScript has triggered a default action inside the browser. This behavior is non-standard and will be removed in M53, around September 2016. See https://www.chromestatus.com/features/5718803933560832 for more details.

I tracked this to this function in ionic.bundle.js (line ~2950) which is dispatching a click event... Which is exactly what the Chrome Status page says should not be happening (from JavaScript).

function triggerMouseEvent(type, ele, x, y) {
  // using initMouseEvent instead of MouseEvent for our Android friends
  var clickEvent = document.createEvent("MouseEvents");
  clickEvent.initMouseEvent(type, true, true, window, 1, 0, 0, x, y, false, false, false, false, 0, null);
  clickEvent.isIonicTap = true;
  ele.dispatchEvent(clickEvent);
}

Now I have updated to M53, I don't see this warning... and I can't open any select controls on my app in Chrome nor on my Samsung (Android 6.0.1). I presume users of my in-production app will not be able to use the drop downs until it is fixed either...

I will try the fixes from @jgw96 ...

EDIT: No luck with data-tap-disabled in Chrome. The trouble is, in the calling function tapClick(e) (~line 2932 ionic.bundle.js), e is trusted.

function tapClick(e) {} _e = TouchEvent {isTrusted: true, isTapHandled: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList…}_

But the clickEvent generated by document.createEvent("MouseEvents") in the triggerMouseEvents() function is untrusted... and initMouseEvent is deprecated. Microsoft's page about createEvent says that the event created will always be untrusted for security reasons...

_clickEvent = MouseEvent {isTrusted: false,_

[sibieta]

Here it is the issue on googles chrome forum
https://productforums.google.com/forum/#!topic/chrome/Q4Rt6d0C4Qo

[zorgster]

I was thinking perhaps to replace my SELECT with a button that opens a modal list and then return the value I want from the selected item in the list... something like this:

https://market.ionic.io/plugins/ionic-modal-select

[zorgster]

I have now switched my select control to an ionic-Select-Control and it works well - it uses a modal window instead of a select control....

https://github.com/OSAMES/ionic-Select-Control

[eugenioclrc]

What about something like this;

const raw = ionic.Platform.navigator.appVersion.match(/Chrom(e|ium)\/([0-9]+)\./);
const chromever = raw ? parseInt(raw[2], 10) : false;
if (chromever >= 53) {
  function avoidTap() {
    return {
      restrict: 'A',
      // scope: '=',
      link: (scope, elem) => {
        elem.attr('data-tap-disabled', 'true');
      },
    };
  }
  angular.module('ionic')
  .directive('selectPolyfill', avoidTap);
}

then you just add ;

<label select-polifill>
<select>
<option selected>1</option>
<option>2</option>
</select>
</label>

[mlynch]

Just pushed a fix for this that will work regardless of the UA setting. Will try to get a release out in short order

[dennybiasiolli]

@mlynch commit 417997d break tests at test/unit/utils/tap.unit.js

[dennybiasiolli]

@mlynch if you want to take a look also at this PR (#8894), will fix all tests error (at least on our develop machines)

[asim-qb]

Thanks @mlynch @dennybiasiolli. Issue is fixed in version 1.3.2. https://github.com/driftyco/ionic/releases/tag/v1.3.2

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.