Don't confuse the Next button of your keyboard as TAB key, it's not. The next button of your keyboard just looks for next input field that is editable by your keyboard e.g text or number field. It will skip everything else because that will require closing the keyboard and bringing up the native calendar or combo box selector.
The TAB key if exists in your keyboard works just as expected. Some keyboards on play-store has a TAB key, like this one. You can download and see pressing the TAB key does focus the next select element or date-input element.
The following demo shows the difference of TAB key and Next button. You can see while navigating using the TAB key, keyboard events fire, which reveals the TAB keyCode 9. But while using the Next key, no keyboard event fires, as if the browser doesn't even know what just happened.
document.getElementById('my_form').addEventListener('keydown', function(event) {
document.getElementById('response_view').innerHTML = event.keyCode;
})
<form action="" id="my_form">
<div>
Last Key Press Key Code:
<span id="response_view" style="color: red;"></span>
</div>
<div>
<input type="text" name="first_name" id="first_name" size="35" placeholder="Select it by click">
</div>
<div>
<input type="text" name="last_name" id="last_name" size="35" placeholder="Then use TAB/Next key to focus this input">
</div>
<select name="date_day">
<option value="-1">Select Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div>
<input type="text" name="address" id="address" size="35" placeholder="address">
</div>
</form>
The only way I see fit to resolve this issue is to use JavaScript to keep track of input elements in focus to determine if the Next key was pressed and it skipped a select element, then focus the select element by JavaScript.
(function(){
let editableElementsSelector = 'input[type=text],input[type=email],input[type=number]';
let nonEditableElementsSelector = 'select,input[type=date],input[type=time]';
let userClickDetected = false, userTouchDetected = false;
// Kepps track of user click for 0.5 seconds
window.addEventListener('click', function() {
userClickDetected = true;
setTimeout(()=>{userClickDetected = false;}, 500);
});
// Kepps track of user touch for 0.5 seconds
window.addEventListener('touchstart', function() {
userTouchDetected = true;
setTimeout(()=>{userTouchDetected = false;}, 500);
});
document.querySelectorAll('form[next-button-fix]').forEach(function(form){
let formElements = form.elements;
let editableElements = form.querySelectorAll(editableElementsSelector);
let nonEditableElements = form.querySelectorAll(nonEditableElementsSelector);
// linking elements
for(let i=1; i<formElements.length; i++){
formElements[i].previousFormElement = formElements[i-1];
formElements[i-1].nextFormElement = formElements[i];
}
// Focuses next element on Next button click
editableElements.forEach(function(element){
element.addEventListener('blur', function(event){
if(!userClickDetected && !userTouchDetected){
if(element.nextFormElement && event.relatedTarget != element.nextFormElement){
element.nextFormElement.focus();
}
}
});
});
// Focuses next element on select element change
nonEditableElements.forEach(function(element){
element.addEventListener('change', function(event){
if(element.nextFormElement){
element.nextFormElement.focus();
}
});
});
});
})();
