JSFiddle - React, Tailwind, and code Playground
HTML
<h1>ru</h1>
<h1>Пример с Datalist</h1>
<p>Проблема:<p>
В FireFox переходит в следующее поле без выбора элемента в datalist.
В Chrome все нормально.
<p> </p>
<h1>en</h1>
<h1>Example Datalist</h1>
<p>Question:<p>
FireFox go to nest input without selected item from datalist.
In Chrome all right.
<form name="frm_send">
<table class="block_table">
<tr><th>f1</th><th>f2</th><th>f3</th><th>f4</th><th>f5</th></tr>
<tr>
<td><input type="text" name="input_1" value="" size="3" maxlength="3" disabled style="text-align:center; "/></td>
<td><input type="text" name="input_2" value="" size="22" maxlength="20" disabled style="text-align:center; "/></td>
<td><input type="text" name="input_3" value="" list="point" size="60" autofocus='autofocus'/></td>
<td><input type="text" name="input_4" value="" list="point" size="60"/></td>
<td><input type="text" name="input_5" value="" size="8" maxlength="8"/></td>
<datalist id="point">
<option value='point 1'></option>
<option value='PoInt 2'></option>
<option value='POINT 12'></option>
<option value='POINT 33'></option>
<option value='new 44'></option>
</datalist>
</tr>
</table>
</form>
JavaScript
var $inputs=$('tr input');
var $datalist=$('datalist');
$inputs.on('keydown', function(event) {
if (isEnter(event)) {
var $next = $inputs.eq($inputs.index(this) + 1);
setTimeout(function(){$next.focus();},200);
event.preventDefault();
}
});
function isEnter(e)
{
var res=false;
if (e.keyCode == 13) res=true;
return res;
}