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?