md-autocomplete to blur itself after item is selected

Question

I have an md-autocomplete which populates with addresses. When an address is selected the focus stays on the element. I would like the md-autocomplete to blur as soon as an address is selected by the user.

The reason is because when done on a mobile phone, the keyboard should hide automatically once the user has selected the address, whereas currently the keyboard stays displayed after address selection.

Thanks!

Answer 1

The question doesn't have many details, so I'll work off the "Basic Usage" Codepen available in the 1.1.4 docs .

Basically you just listen for the selected-item-changed , and then trigger a blur event on the currently active DOM element.

Here's the Codepen . It works in desktop Chrome, but I'm not able to test if it will fix the keyboard problem on mobile.

I just changed the selected-item-changed handler as follows:

function selectedItemChange(item) {
  ///// Get the currently focused element
  var activeElement = document.activeElement;

  ///// Check that there actually was a focused element
  ///// and make sure a valid item was selected.
  if (activeElement && item) {
    activeElement.blur();
  }

  $log.info('Item changed to ' + JSON.stringify(item));
}