Submit with enter-press is not working if datepicker is inside form tag

[marcoschulte]

Hi icehaunter,

great work on this component! However, I noticed an issue with this component. If it is being placed inside a form, it is not possible anymore to submit the form with a press of enter.

<form v-on:submit.prevent="save">
   <datepicker v-model="foo"/>
   <input type="text" v-model="bar">
   <button type="submit">Speichern</button>
</form>

This form can only be submitted by pressing the button. However, if I move the datepicker component above the opening form tag, I can submit the form if the text input is focused and I press enter.

[icehaunter]

Hello! I'm not sure how you want this to be handled, given that the input is readonly by default, and clicking enter just closes the picker. Would you like a onEnter event to listen to?

[Laripoli]

Hey, the problem is that if the datepicker component is present inside a form tag, the rest of inputs no longer react to enter keypress, as a workaround I set a ref for the form and add @keyup.enter="formEl!.requestSubmit()" to the form, losing the enter event of the component but at least keeping the submit on enter key for the rest of the form.

[marcoschulte]

Sorry, my issue description wasn't clear enough. As @Laripoli says, the issue is not if the datepicker is opened. The issue is that I cannot submit the form with enter if the input=text control is focused.