Pressing enter on DayPickerInput inside a form causes submit

[grayChilli]

Similar as minor bug #443.
It's about day picker input with dropdown calendar.
Even when read-only, read-only input field could receive focus. If you press enter the form will be submited.

<DayPickerInput
  placeholder="DD/MM/YYYY"
  onKeyPress={e => {
    e.target.keyCode === 13 && e.preventDefault();
  }}
  inputProps={{
    disabled: this.state.locked,
    readOnly: true,
    name: "datepick",
    type: "text"
  }}
  dayPickerProps={{ localeUtils: MomentLocaleUtils, locale: "de" }}
  value={this.state.mydate}
  formatDate={formatDate}
  onDayChange={this.handleDate}
/>;

[gpbl]

This is the desired behavior. What do you expect to happen instead?

[grayChilli]

There is a form with a more than 10 fields. I would like to prevent users from accidentally submitting a form by hitting Enter on any field including dayPickerInput. preventDefault does not work with dayPickerInput.

[gpbl]

If you want to prevent a submit you should prevent the submit default event, like:

<form onSubmit={e=>e.preventDefault()} />

[frrodriguez]

Hi, i have the same issue, with another buttons.

The UI buttons to swipe between months '<>' also triggers sumbit on uppers form.

If i just inspect these buttons and adds type="button" to them, works correctly.

All buttons in html are type="submit" if omits, then i think these buttons must be type "button".

Do not force us to use e.preventDefault() on forms, casue we can need in other situations.

Thx