Select/option doesn't work in chrome 53 after inspect

Short description of the problem:

Select/option doesn’t work in chrome 53 after inspect.

What behavior are you expecting?

Open select box and see options list. Instead nothing happens. This issue happens only on chrome 53 desktop.

Steps to reproduce:

1. Open Chrome and navigate to localhost:8100 after ionic serve
2. Right click anywhere -> inspect element -> select any device
3. Be sure to be on a page with a select box. Example:

controller.js
...
$scope.data = {}
$scope.data.list = ['1', '2', '3'];
$scope.data.selected = $scope.data.list[0];


view.html
            <ion-input class="item item-select text-align-left">
                <select
                        ng-options="value for value in data.list"
                        ng-model="data.selected">
                </select>
            </ion-input>

Which Ionic Version? 1.x or 2.x 1.3.1

Run ionic info from terminal/cmd prompt: (paste output below) Your system information:

Cordova CLI: 6.1.1 Gulp version: CLI version 1.2.1 Gulp local: Local version 3.9.1 Ionic CLI Version: 1.7.16 Ionic App Lib Version: 0.7.3 ios-deploy version: 1.8.5 ios-sim version: 5.0.6 OS: Mac OS X El Capitan Node Version: v5.6.0 Xcode version: Xcode 7.3.1 Build version 7D1014

Plunker that shows an example of your issue

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

[washington-guedes]

Using version 52 of chrome it works, but throws this warn:

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.

My chrome updated today to version 53 and the select stopped working. The warn above also stopped.

I updated my ionic app and the select is still broken. Before updating ionic, the warn was caused by line 2865:

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 don’t think it is a Chrome DevTools bug. It seems to be a problem with dispatchEvent action. I’m looking for a solution to this too.

[asim-qb]

Nope. I think issue is still there.

Some more info I’ve found:

1. initMouseEvent is deprecated(Ref)
2. It was possible to open a select element through JS earlier. Not anymore, (after Chrome 53 update) Quoting from the feature change page:

We wish to prevent synthetic events from executing the default action, aligning with Firefox and IE.

1. Ionic is creating synthetic event for touch inputs on select (?) that’s why issue is seen on developer tools and native devices only.

@jgw96 Can you please re-open the issue?