autocomplete: can't tap outside to close dropdown on mobile

[clshortfuse]

Actual Behavior:

• What is the issue? Can't close autocomplete dropdown by touching outside
• What is the expected behavior? Close autocomplete dropdown by clicking

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: https://material.angularjs.org/HEAD/demo/autocomplete
• Details:

Angular Versions: *

• Angular Version: 1.5.5
• Angular Material Version: master

Additional Information:

• Browser Type: * ChromeOS
• Browser Version: * V52
• OS: * ChromeOS
• Stack Traces:

---

It seems touch events aren't allowed. md-select doesn't have this issue.

@bradrich This might interest you.

[topherfangio]

@clshortfuse Why don't you go ahead and work on this one too. If you run into trouble, reach out to me and I can assist.

[marlonmleite]

Someone contains provisional solution?
It's big problem for me.

[donmccurdy]

@marlonmleite – a temporary workaround is discussed in #9581. ($mdGestureProvider.skipClickHijack();).

[clshortfuse]

For those that need a workaround and don't want to sacrifice it on all devices, here's what I'm using. Add during your Angular app config phase. :

function hasViewportSet() {
  // https://webkit.org/blog/5610/more-responsive-tapping-on-ios/
  // https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away
  return [].slice.call(document.querySelectorAll("meta[name=viewport]")).some(function(element) {
    var viewportContent = element.getAttribute('content');
    return (viewportContent && viewportContent.split(/,| /).some(function(property) {
      return property.toLowerCase() == 'width=device-width';
    }));
  });
}

function hasMobileUserAgent() {
  // https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
  return navigator.userAgent.indexOf('Mobi') !== -1;
}

function hasTabletUserAgent() {
  // https://developer.chrome.com/multidevice/user-agent
  return navigator.userAgent.indexOf('Android') !== -1;
}

function browserDetectsMobileSites() {
  function checkMinVersion(regexMatch, major, minor) {
    if (!regexMatch) return false;
    var splitVersions = regexMatch[1].split('.');
    var parsedMajor = parseInt(splitVersions[0]);
    if (isNaN(parsedMajor) || !parsedMajor || parsedMajor < major) return false;
    if (parsedMajor > major || minor === undefined || minor === null || minor === 0) return true;
    var parsedMinor = parseInt(splitVersions[1]);
    if (isNaN(parsedMinor) || !parsedMinor || parsedMinor < minor) return false;
    return true;
  }
  // Chrome v32+
  if (checkMinVersion(navigator.userAgent.match(/Chrome\/([.0-9]*)/), 32)) return true;

  // AppleWebKit 601.1+
  // Safari versions were reset around iOS 8.0 and are unreliable
  if (checkMinVersion(navigator.userAgent.match(/AppleWebKit\/([.0-9]*)/), 601, 1)) return true;


  // FireFox v27+
  if (checkMinVersion(navigator.userAgent.match(/Firefox\/([.0-9]*)/), 27)) return true;

  // Blackberry v10.3+
  if (navigator.userAgent.indexOf('BB10') !== -1) {
    if (checkMinVersion(navigator.userAgent.match(/Version\/([.0-9]*)/), 10, 3)) return true;
  }
  return false;
}

if ((hasMobileUserAgent() || hasTabletUserAgent()) ? (hasViewportSet() && browserDetectsMobileSites()) : true) {
  $mdGestureProvider.skipClickHijack();
}

[devversion]

I will merge this issue into #9581 (regardless of the issue number now)