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

2 posts, 1 answers
  1. Artie
    Artie avatar
    29 posts
    Member since:
    May 2015

    Posted 21 Jul 2015 Link to this post

    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!

  2. Answer
    Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 23 Jul 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top