Ionic-framework: Select/option doesn't work in chrome 53 after inspect

[marcoturi]

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

[jgw96]

Hello, thanks for using Ionic! This is most likely a bug with Chrome DevTools and not Ionic. We are not doing anything special with the select that should cause anything to happen when it is inspected. Because of this, I am going to be closing this issue for now. Thanks for using Ionic!

[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.

[sirramin]

I have same problem too

[asim-qb]

Same problem here.

ionic version : 1.1.0

Effected devices:

One
Chrome version: 53
OS: Ubuntu 14.04
Mode: Chrome developer tools

Two
Chrome version: 53
OS: Android Marshmallow.

[krugerdavid]

Hello everyone
Why is this issue mark as closed? did anyone solved this?

[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?

[PetterDK]

I'm also experiencing this after Chrome 53 update.

No selects are responding in stable version, but the nightly build (version 55) works with a long press.

UPDATE:
I can use the selects with the DevTools open, but only if I don't use a user agent and set it to "Responsive" and Mobile (no touch). Then I can use them just fine.

Ionic: 1.3.1
Angular: 1.3.20
Chrome: 53.0.2785.116 (64-bit)
OS: Mac OSX 10.11.6

[onelifemedia]

Just checking to see if I have the same issue. I did an ionic upload, and had the same issue. But if I tap just below the select box, I can get the select box to open.

If I remove ionic.bundle.js, everything works. I tried to locate the event handler that's swallowing the click event, but to no avail.

Edit: Looks like it's the touchstart event. Remove the one that points to the tapTouchStart function, and everything behaves.

[harikvpy]

I face the same issue as well. Using Chrome 53 on Ubuntu 16 with Ionic 1.3.1.

[PetterDK]

@onelifemedia Does removing the touchstart event affect it's behavior on devices? It seems like an unhealthy solution.

I'm also capable of clicking just above the select to open it.

[onelifemedia]

I just did it in the developer tools. Haven't tried it on the device yet. 100% agree that it's unhealthy.

[Ksreekanthreddy]

Hi everyone

I am facing the problem of select box in chrome latest version(53) while checking the responsive, i am attaching the image also,in image that black mark is showing while click on select box. Please tell me the alternative solution for this problem

[jgw96]

Hello everyone, thanks for using Ionic! Sorry for the closing of this issue earlier. This is a legit issue and we are tracking it in #8181 . This is due to a deprecation in the v53 release of chrome. I have not tested it yet but it also looks like this is broken in mobile Firefox and mobile Edge.

[washington-guedes]

By now the solution seems to be using a custom select.

Then I added select2 (js and css files), and created this directive:

DirectivesModule.directive('chromeSelect2', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            window.isChrome() && $timeout(function() {
                var _select = $(element).select2();
                var _select2 = _select.closest('.row').find('.select2');
                var dropdownIsOpen = false;
                _select2.on('tap', function() {
                    _select.select2(dropdownIsOpen ? 'close' : 'open');
                    dropdownIsOpen = !dropdownIsOpen;
                });
                var eventToHandle = 'touchstart wheel';
                $(window).on(eventToHandle, function handleEvent(e) {
                    if (!/^select2/.test(e.target.className)) {
                        if (_select.is(':visible')) {
                            if (dropdownIsOpen) {
                                _select.select2('close');
                                dropdownIsOpen = false;
                            }
                            return;
                        }
                        $(this).off(eventToHandle, handleEvent);
                    }
                });
            });
        },
    }
});

And in the html:

<select chrome-select2
        ng-model="combobox.item" 
        ng-options="item as item.description for item in combobox.data">
</select>

I took the window.isChrome function from this SO post:

window.isChrome = function() {
    var isChromium = window.chrome,
        winNav = window.navigator,
        vendorName = winNav.vendor,
        isOpera = winNav.userAgent.indexOf("OPR") > -1,
        isIEedge = winNav.userAgent.indexOf("Edge") > -1,
        isIOSChrome = winNav.userAgent.match("CriOS");

    return isIOSChrome || (
        isChromium !== null &&
        isChromium !== undefined &&
        vendorName === "Google Inc." &&
        isOpera == false &&
        isIEedge == false
    );
};