Pressing Enter key on input field does not work as expected

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();
      }