Can't trigger .blur() after selecting an item

[Artie]

We are trying to call .blur() on an auto complete after the user has selected an item.  The main reason for this is that when the textbox has focus, the keyboard on the iPad remains up.  We were given a requirement that we hide the keyboard after the user selects an item, something we figured we could accomplish by simply invoking .blur() on the input field.  What we are finding though is that something in the framework immediately re-calls focus() on the input right after we call blur().  I've tried many different little hacks to override, cancel, or prevent the various events but I've had no luck.  I've created a Dojo that demonstrates this behavior:

 http://dojo.telerik.com/oWalE

If you look at the console, you can see the order in which events are firing:

focus
open
change
close
blur  <-- I called this one programatically
focus <-- I did not call this one!

Any ideas as to how we can get the iOS keyboard to go away after an item has been selected?

 Thanks!

[Plamen Lazarov]

Hello Artie,

Thank you for the detailed information. Indeed you are right - .blur() will hide the keyboard. What you should do is to set timeout in the change/close event. E.g: 

change: function(e) {
  var ac = this;
  setTimeout(function(){
    ac.element.blur();
  })
}

For your convenience I modified the provided dojo in order to illustrate this approach.  

Regards,
Plamen Lazarov
Telerik