Why your WinJS app may navigate back when a textbox is in focus and you hit enter

It sounds kind of obscure, but it could happen to you. While developing an application, you navigate to a page with a textbox and out of habit you press the enter key and your app navigates back to the previous page, losing your entered text.

Why, why would this happen?  Who thought it was a good idea to add it to the template?

The good news is this is not intentional. The Metro UX Guidelines recommend, as you would expect, the Enter key is used to Start or activate, not to navigate back.

So what was going on with my app (and maybe yours)? I’ll explain the few steps that line up to cause this behavior and then explain the quick and easy fix.

1) Use the PageControlNavigator class from the Grid App project template
If you create a new Grid Application project in Visual Studio or Blend, you are provided a PageControlNavigator class which will happily manage Page fragments for you.

2) Add a textbox and a button to a secondary page
Continuing with the Grid application project example, open the groupDetail.html page and add the following lines to the main section.

3) Open the app, nav to the secondary page, select the textbox and hit enter
Run the Grid application project and click a group header (“Group Title: 1″), now select the textbox and hit enter.  Instead of the “Tap here” button click event firing the app naviagates back.

Why didn’t the “Tap here” button fire?  Why did it navigate back?

Here’s the issue:

  • The default page template adds a “win-backbutton” button to the  header of each page
  • The HTML5 button tag is by default set to a type submit button
  • Since we are running in a browser, hitting the enter key “clicks” the first submit button
  • The navigator class handles the click event of “win-backbutton” and calls nav.back()

Here’s the solution:

The fix, which you probably figured out already, is to change the type of the back button
In the header of the secondary page, set the button type to “button”:

That’s it, problem solved! The Enter key can go back to starting and activating again and your users won’t unintentionally lose data and cry out in frustration.

This entry was posted in Client Technologies and tagged , . Bookmark the permalink.

11 Responses to Why your WinJS app may navigate back when a textbox is in focus and you hit enter

  1. Pingback: Dew Drop – June 20, 2012 (#1,348) | Alvin Ashcraft's Morning Dew

  2. Pingback: Windows 8 Developer Links – 2012-06-21Dan Rigby | Dan Rigby

  3. Nallaperumal says:

    Yes. Thanks.. It worked For Me.

  4. Bahadir ARSLAN says:

    This is nice but i don’t want to löse my back button. What could i do?

  5. 自由国度 says:

    great post

  6. GotDibbs says:

    Awesome. Exactly my problem and exactly the solution.

  7. Wimk says:

    is there also a way to avoid responding to the back-button on my mouse (for example.) ??

  8. Adam Kinney says:

    Hi Wimk, sorry for the delay, I just got back from a bit of vacation. If you haven’t found it yet, the _mspointerupHandler function is responsible for responding to the back-button. Comment it out or don’t add the handler if you don’t want it to respond that way. There’s a good chance that your user may expect it though.

  9. Ananth says:

    My app failed cert for this reason. Thanks for the article. Now got the right behaviour.

  10. SpirytSista says:

    Thanks! I did have one issue where, because it was my front page and it had no nav-button, I had to set all the buttons to type=button, except the one that was my submit button which i set to submit. anyway,thanks so much- this was boggling my mind

  11. allagora says:

    Pretty helpful, thank you!!

Leave a Reply