HTML 5 forms input focus behavior user experience issues

5 posts, 1 answers
  1. Brandon Peterson
    Brandon Peterson avatar
    47 posts
    Member since:
    May 2007

    Posted 15 May 2013 Link to this post

    When editing form fields in my HTML 5 kendo mobile app the input focus behavior is strange in iOS webviews and Mobile Safari. Navigating with the iOS keyboard Previous and Next buttons works fine but in our user acceptance testing we found many users tap the subsequent fields they want to edit instead of using these buttons. When the keyboard is present because an input has focus and the user taps on another field, that field is correctly focused sometimes but more often the focus returns to the original field with some "scroll jumpiness", an arbitrary field that was not tapped gains focus, or the keyboard is hidden and no input has focus.

    Our app is currently on kendo mobile v2013.1.319 but we found that all versions since 2012.2.719 has the same issue.

    Steps to reproduce:
    1. navigate to http://demos.kendoui.com/mobile/forms/index.html in Mobile Safari
    2. tap the "Type text " field so that it gains focus and the software keyboard is shown
    3. tap the password, search, url, email fields and go back and forth tapping among them and observe "scroll jumpiness" and random field focusing behavior.
    This behavior occurs on simple, two-input login forms also:
    1. navigate to http://m.socialofficesuite.com in Mobile Safari
    2. tap to focus username or password and tap back and forth between fields repeatedly

    Is this glitchiness with the kendo javascript framework or perhaps an issue particular to the element hierarchy form > ul > li > label > input focus behavior?

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 16 May 2013 Link to this post

    Hello Brandon,

    My guess is that you are hitting one known issue with the inputs focus and the hideAddressBar feature. Can you please try disabling that: 

    new kendo.mobile.Application(document.body, { hideAddressBar: false });

    and let us know if this resolves the problem? 

    Regards,
    Petyo
    the Telerik team
    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
  4. Brandon Peterson
    Brandon Peterson avatar
    47 posts
    Member since:
    May 2007

    Posted 16 May 2013 Link to this post

    That did indeed resolve the issue with the input focus behavior.  When the hideAddressBar setting is set as false and the mobile site is pinned as an iOS HomeScreen web app via the  "Add to Home Screen" option, users have a nice app experience with no location bar shown so we will encourage them to view the site in this manner. Is there a timeline for a fix for this otherwise?
  5. Answer
    Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 17 May 2013 Link to this post

    Hello Brandon,

    The problem should be addressed in our latest internal build, uploaded today. Can you please give it a try? 

    Greetings,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Brandon Peterson
    Brandon Peterson avatar
    47 posts
    Member since:
    May 2007

    Posted 18 May 2013 Link to this post

    Petyo, internal build 2013.1.517 does resolve this issue. That was fast solution! Thanks for your hard work Kendo team.
Back to Top
Kendo UI is VS 2017 Ready