CODEWITHSUNDEEP
javascriptangularjsangular-material
Karl
Karl

Reputation: 179

md-autocomplete to blur itself after item is selected

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!

Upvotes: 1

Views: 1334

Answers (1)

wwv
wwv

Reputation: 911

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));
}

Upvotes: 3

Related Questions