Pressing Enter key on input field does not work as expected - html

Question

I have a form that uses a calendar with an input field. For some reason when I press the Enter key while on the input field it doesn't submit the form. Instead the focus is moved onto the calendar icon in the form. I tried changing the type to = submit and to button, but the behavior doesn't change. What can I do to make sure that the form gets submitted while the user is on the input field?
<form id="form" name="form" action="process">
<div class='row' tal:condition="python:op in ['search', 'add', 'view']">
<div style="width: 5em;"><label for="date">Date</label></div>
<div tal:content="structure python:container.util.getDateTimeInputsA11y(form_name='form', my_date=DateTime().strftime('%m-%d-%Y'), date_field='date',type_date=0, date_arrows=1, use_clear='yes')"></div>
</div>
<div class='row first_child' tal:condition="python:op in ['add']">
<div><label for="time">Time</label></div>
<div><input type="text" id="time" name="time" tal:attributes="value python:DateTime(fix_date).strftime('%H%M')" maxlength="4" nofocus="1" /></div>
</div>
<div class='row first_child' tal:condition="python:op in ['search', 'add', 'unit']">
<div><label for="unit">Unit</label></div>
<div><a tal:define="opt_select_cond python:'unit.patients=\'Y\'';"
tal:replace="structure python:container.util.getUnitSelects(my_form='form', my_var='unit', my_var_value=unit, unit_type='sch_unit', text_input=1, multiunit=0, opt_select_cond=opt_select_cond)" /></div>
</div>
<div class='row first_child' tal:condition="python:op in ['add', 'edit']">
<div><label for="room">Room</label></div>
<div><input type="text" id="room" name="room" tal:attributes="value python:str(bed.get('room') or '').strip();" /></div>
</div>
<div class='row first_child' tal:condition="python:op in ['add', 'edit']">
<div><label for="bed">Bed</label></div>
<div><input type="text" id="bed" name="bed" tal:attributes="value python:str(bed.get('bed') or '').strip();" /></div>
</div>
<div>
<div>
<input type="hidden" id="op" name="op" tal:attributes="value python:op;" />
<input type="hidden" id="bed_id" name="bed_id" tal:attributes="value python:int(request.get('bed_id') or 0);" />
<input type="button" class="btn btn-light" id="submit_btn" tal:attributes="value python:op.title();" />
</div>
</div>
</form>
I also noticed that the tal:replace structure calls this print line in a python file.
print """
<input type="%s" name="%s" id="%s" aria-label="%s" class="uppercase" value="%s"
onfocus="this.select();"%s size="10" maxlength="10">
""" % (test(text_input,'text','hidden'), my_var, my_var, my_var_title, my_var_value, test(onchange, ' onchange="%s"'%(onchange), ''))
I removed the onfocus on that print line but same issue still occurs.

Answer 1

For any form to submit after enter, you need to have either:
<button type="submit"></button>
or:
<input type="submit" />
in it which is missing in your code.

Answer 2

It's working now after I added a script tag for event listener. Still unclear why pressing Enter key changes the focus to calendar.
let unit_input = document.querySelector('#unit');
unit_input.addEventListener('keydown', (e) => {
switch (e.key)
{
case 'Enter':
document.getElementById('submit_btn').click();
}