Material: md-select: breaks native select elements

[snsullivan]

Actual Behavior:

• What is the issue? *
  Native selects do not function when angular-material is included as a dependency on a Google Pixel device running Android 7.1 (Chrome browser)
• What is the expected behavior?
  Native selects should still be able to open/close and retain all their functionality

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/snavillus/full/wJbpWM
• Details: Navigate to the URL via the Chrome browser on a Google Pixel running Android 7.1, notice the native select has no functionality.

AngularJS Versions: *

• AngularJS Version: 1.5.6
• AngularJS Material Version: 1.0.0

Additional Information:

• Browser Type: * Chrome (Google Pixel)
• Browser Version: * 55.0.2883.91
• OS: * Android 7.1
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[jslvtr]

I am encountering the same bug. Did you make any progress?

[snsullivan]

Hey Jose - still no word from the angular team. We attempted to update to newer patch and minor versions. Also tried limiting the scope of the angular app, but to no avail.

Encouraged to see this bug is reproducible for other developers. Hopefully this will lead to a resolution.

[jslvtr]

@snsullivan I've begun swapping my native selects for md-select. Sadly it's not a native experience on Android but it's better than nothing being functional. Hope there'll be a resolution soon!

[EladBezalel]

@snsullivan @jslvtr seems like this is an issue with our gestures wrapper
@DevVersion seems like the event source element is not being the select itself, can you think of why from the top of your head?

After some investigation seems like
mouseInputHijacker or clickHijacker are the source of the problem, @DevVersion would love to have your input what are we trying to do over there

[murphy85]

We encountered a similar issues with the native html select items. Wenn wir click it fast it immediately closes the native popup. When we click the select item long or move with the finger outside the select item while clicking, the popup will stay open.

angular: 1.6.2
angular-material: 1.1.5

As a workaround (if you don't need the functionality) you can disable click hijack:

   app = angular.module('MyApp', ['ngMaterial'])
      .config(function( $mdGestureProvider ) {
          $mdGestureProvider.skipClickHijack();
      });

[brad-sobie]

Having same issue

[Splaktar]

As @murphy85 mentions above, if you need to use select elements on the page (instead of md-select) along with AngularJS Material then you'll need to call $mdGestureProvider.skipClickHijack() to avoid having the Gesture service hijack the clicks going to the native selects.