0

When using Jquery mobile, When you select an option from a select with the keyboard, you cannot tab to the next input in the DOM. If you take out the jquery mobile bits, things work as expected.

I have the following html:

<body>
<input type='text' id='starter' /><br />
<select id='sel'>
    <option value=''></option>
    <option value='1'>One</option>
    <option value='2'>Two</option>
</select><br />
<input type='text' id='ender' /><br />
</body>

I have set this up on fiddler with jquery and jquery mobile below:

http://jsfiddle.net/58jkj1wa/ - raw jquery works as expected.

http://jsfiddle.net/a5reojmo/4/ - jquery mobile broken select.

To reproduce the issue perform the following:

  • The cursor starts in the first input
  • press 'tab' to move to the select
  • press down arrow to activate the options
  • press down arrow to select the first option
  • press return to accept the change (non mobile - focus is now correctly on the select)
  • press tab

In the non-mobile version the cursor is now in the second input as expected. In the mobile version it's someplace else... and I don't know where. You have tab a lot for the focus to move to the first input again... then through the inputs to the field you want after the select you just used.

Personally I reckon this is a bug, so the most interfering I felt prepared to do was to try the on change trigger to try and set the focus back to the select like this:

$("#sel").on("change", function (e) {
    $("#sel").focus();
});

But this does not work. If you do the focus call anywhere else, it works as expected, highlighting correctly and tabbing off if you do not change the value. but as soon as you change the value the focus is someplace else.

I can set the focus to the next item however:

$("#sel").on("change", function (e) {
    $("#ender").focus();
});

But I'd rather not do this as this means I can't do some of the dynamic hiding of inputs I'm doing and have to programmatically mirror the flow handling in the form.

I've tried updating some of wrapper stuff that JQM adds and I've tried setting focus on another input and then back again, and then optionally doing a selectmenu refresh, but the mobile still can't tab out to the next input. I've also tried various blur() and focus() calls all to no avail.

I did see this answer doing something similar by adding a keydown handler, but since I don't know where the focus is after a value change I don't know where to add the keydown handler... besides this sounds like a JQuery Mobile bug doesn't it??

Do you know how I can make tab and focus-highlight work correctly after a select change in JQuery Mobile?

Is this a bug I should report?

Community
  • 1
  • 1
Nigel Johnson
  • 522
  • 1
  • 5
  • 21
  • It may be that when you use the "mobile" widget set, the concept of using a "tab" key is no longer meaningful? – Kolban Nov 23 '14 at 04:02
  • it's a bug and not a bug, jQM should differentiate between desktop and touch devices. https://github.com/jquery/jquery-mobile/blob/master/js/widgets/forms/select.js#L142-L150 On mobile devices when native and jqm native menus receive focus, they become active. To close them, focus should move to another element or just `.blur()` in that case the focus goes no where, they just blur/lose focus. – Omar Nov 23 '14 at 14:14
  • Delaying re`focus`ing a bit should solve your problem http://jsfiddle.net/3x1k85Ld/ – Omar Nov 23 '14 at 17:28
  • 2 things - first, it either a bug on the select in that it doesn't refocus and tab or it's a bug on the text field in that they do :) Second - Omar, post that as the answer, it gets my vote !! Thanks loads, that's perfect. – Nigel Johnson Nov 25 '14 at 13:31

0 Answers0