If item is selected in dynamically created selected element, enter need to pressed two times to move focus to next element.
How to fix this so that single enter press selects item and moves focus to next element in form ?
To reproduce, run snippet and open select element Test. Press enter key. Select element remains focused. Only second select moves focus to next element.
How to fix this so that first enter moves focus to next element ?
document.addEventListener('keydown', function(e) {
if (event.keyCode === 13 && event.target.nodeName == 'SELECT') {
var form = event.target.closest('form');
var index = Array.prototype.indexOf.call(form, event.target);
form.elements[index + 1].focus();
return false;
}
});<form>
<div id="Customer">Customer</div>
<select>
<option value="">Test</option>
<option value="">Test</option>
</select>
<input type="text">
<select>
<option value="">Test</option>
<option value="">Test</option>
</select>
<select>
<option value="">Test</option>
<option value="">Test</option>
</select>
<input type="text">
</form>jquery and Bootstrap 5 are used.