hyperRail icon indicating copy to clipboard operation
hyperRail copied to clipboard

Accept Enterkey to search from homepage

Open Bertware opened this issue 9 years ago • 5 comments

When entering 2 stations at the homepage search (https://irail.be/route) and pressing Enter, nothing happens.

Steps to recreate:

  • Enter 2 station names
  • Keep focus in second station field
  • Press Enter

Result:

  • Nothing happens

Expected result:

  • The search results are loaded

Handling this keypress would improve keyboard navigation on the site

Bertware avatar Oct 21 '16 12:10 Bertware

Additional: Accept input on loading homepage.

Steps to recreate:

  • Load the irail website. Language is already set, or set the language.
  • Start typing

Result:

  • Typing is ignored. The "from" field is not in focus.

Expected result:

  • I start typing in the first search field, the "from" field. This field should have focus.

Setting focus to this field would improve the user experience, and reduce the time needed to search for a train.

Bertware avatar Nov 06 '16 19:11 Bertware

Second problem can probably be fixed with an autofocus attribute

Haroenv avatar Nov 06 '16 19:11 Haroenv

First problem can probably be fixed by using a form template. This also seems a good idea to keep the HTML the way it should be. Any machine parsing the site (screen readers, but also browsers who want to apply default web actions, like enter to submit) can't see the form right now. Another option is to use javascript for this, though this does not seem like the best option.

Angular allows form tags, so there is no obvious reason to not use them. https://docs.angularjs.org/guide/forms.

I can fix them myself this weekend when I have the time, if someone has some spare time before then they should feel free to pick it up :)

Edit: Possible javascript (quick) fix: In PlannerCtrl.js, line 24:

  $(document).keypress(function (e) {
    if(e.which === 13){
      $("#confirm").focus();
    }
  });

Changing $("#confirm").focus(); to $("#confirm").click(); would fix this issue.

Given the fact that this javascript hook is already present, this might be the best solution in this case. I'd like a contributor backing this up before I propose this in a pull request though.

Bertware avatar Nov 06 '16 21:11 Bertware

I'm not a front-end expert here myself so wouldn't know whether this actually would indeed fix the problem. @xavez maybe you can take a look at this latest comment?

pietercolpaert avatar Nov 24 '16 10:11 pietercolpaert

What @Bertware suggests (focus to click) is indeed a fast solution that doesn't require that much change. I agree that it should change to form though, and then the enter listener can go away.

Haroenv avatar Nov 24 '16 11:11 Haroenv