locked
[Touch screen] Tab on textbox requires user to click again to focus on textbox

    Question

  • I am seeing this issue in our app in touch screen, but works perfectly fine on keyboard and mouse.  

    When using touch screen and tab on a textbox.  (<textbox> in html),

    the whole screen will be moved up.

    the textbox will lose focus.

    the user has to tab again on the textbox just to enter the text using virtual keyboard.

    Anyone seeing this?   

    Tuesday, December 04, 2012 6:40 AM

Answers

All replies

  • Hi,

    Please post the related code.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, December 04, 2012 7:43 AM
  • I finally able to reproduce this in a sample app.  

    create a split view template app.  

    in split.html, add the following after </article> tag.

    <div>
        <textarea></textarea>
    </div>

    1st issue is:
    run this on a touch screen.  if you tap on the text area, you'll find that the virtual screen covered up the textarea, and user is unable to enter the text.  

    You can change the sample data to make it shorter so the textarea is higher on the screen.  tap on the textarea and the textarea lost focus.  user has to tap on it again.
    Wednesday, December 05, 2012 9:11 AM
  • Hi,

    I have a test on my side. And find you could enter the text through virtual keyboard. Any more question, please feel free to reply.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Tuesday, December 11, 2012 9:46 AM
    • Unmarked as answer by w-p Wednesday, December 12, 2012 7:47 AM
    Monday, December 10, 2012 8:30 AM
  • Hi Roy,

    Thanks for the test, but perhaps I can send you the sample code?

    I can reproduce it very consistently.  User has to tap the textbox twice to enter the text.  The first time user tab on the textbox, it brings up the virtual keyboard.  but the textbox seems to lose focus.  The user has to tab on the textbox again, then enter the text from virtual keyboard. 

    I forget to mention it last time, when trying it on simulator, we'll have to enter "basic touch mode" to reproduce the problem.  without that, it won't reproduce the problem. 

    • Edited by w-p Wednesday, December 12, 2012 8:04 AM
    Wednesday, December 12, 2012 8:00 AM
  • Hi,

    The sample code should be very simple. And test again just now. That still work normally on my side. I suggest you test with another pc or test in a surface.

    Any question, please feel free to reply.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, December 12, 2012 8:44 AM
  • The sample code is very simple.  Just as I described earlier.  split template code with <textarea>.  Since you are not able to reproduce this issue, so I thought we can compare our two projects to see what is the difference.  What do you think?  
    Thursday, December 13, 2012 1:13 AM
  • here is the sample source code of split.html I have.  all i did was adding <textarea> and <div> to it.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>splitPage</title>

        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

        <link href="/css/default.css" rel="stylesheet" />
        <link href="/pages/split/split.css" rel="stylesheet" />
        <script src="/js/data.js"></script>
        <script src="/pages/split/split.js"></script>
    </head>
    <body>
        <!-- This template is used to display each item in the ListView declared below. -->
        <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
            <div class="item">
                <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
                <div class="item-info">
                    <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
                    <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
                    <h4 class="item-description" data-win-bind="textContent: description"></h4>
                </div>
            </div>
        </div>

        <!-- The content that will be loaded and displayed. -->
        <div class="splitpage fragment">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle"></span>
                </h1>
            </header>
            <div class="itemlistsection" aria-label="List column">
                <div class="itemlist win-selectionstylefilled" aria-label="List of this group's items" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'single', swipeBehavior: 'none', tapBehavior: 'toggleSelect' }"></div>
            </div>
            <div class="articlesection" aria-atomic="true" aria-label="Item detail column" aria-live="assertive">
                <article>
                    <header class="header">
                        <div class="text">
                            <h2 class="article-title win-type-ellipsis" data-win-bind="textContent: title"></h2>
                            <h4 class="article-subtitle" data-win-bind="textContent: subtitle"></h4>
                        </div>
                        <img class="article-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
                    </header>
                    <div class="article-content" data-win-bind="innerHTML: content"></div>
                </article>
                <div>
                    <textarea></textarea>
                </div>
            </div>
        </div>
    </body>
    </html>
     

    Thursday, December 13, 2012 1:23 AM
  • As you suggested, I have tried to the same thing on a Samsung Slate 7 tablet (running Windows 8 Enterprise).  And I can reproduce it there as well with the simple app of split template app with textarea. 


    Thursday, December 13, 2012 1:27 AM
  • Hi,

    Please check the screen record at https://skydrive.live.com/?cid=6B6C9082658DF18D&id=6B6C9082658DF18D%21121


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, December 13, 2012 1:46 AM
  • Hi Roy,

    Thanks for posting the video.  That is a good idea, now I can clearly see the difference between what you did and what I did.

    In earlier post, I mentioned that the sample is an Visual Studio generated Split template app and add an <textarea> to it.

    That is all I did to produce the issue.  

    1. In Visual Studio 2012, select "new project" -> select "split app".

    2. Go to split.html, and add the <textarea> after <article> as mentioned before.  

    <div>
        <textarea></textarea>
    </div>

    Thanks for looking into it.
    • Edited by w-p Thursday, December 13, 2012 10:07 AM
    Thursday, December 13, 2012 10:07 AM
  • Hi Roy,

    How did it go?  

    Please let me know if there is any questions regarding my instructions in my earlier message.  

    Tuesday, December 18, 2012 12:44 AM
  • Hi,

    I am sorry that this question is not easy.  

    Are you able to reproduce this issue following these 2 steps?  If so, could you file it as a bug to the development team or suggest some kind of fixes?

    1. In Visual Studio 2012, select "new project" -> select "split app".

    2. Go to split.html, and add the <textarea> after <article> as mentioned before.  

    <div>
        <textarea></textarea>
    </div>

    Tuesday, December 18, 2012 7:43 PM
  • Hi,

    Yes, I have reproduced your scenario on my side. And have the same problem. I will report this to product team. Any update will tell you.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, December 19, 2012 1:37 AM
  • Look like there's a bug with the loss of focus.  But for the issue where it covers up the textbox, I can see that it's not a good scenario, and will report it, but it also seems that there's simply not enough room at the bottom of the HTML page for the textarea to move up enough to not be covered.  My suggestion:  don't do this.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, December 31, 2012 6:59 PM
    Moderator