Add form submit event and fix browser reload upon form submission.

[kkinder]

This fixes two bad behaviors:

1. When you hit enter in a form, it may not submit at all.

2. If it does, it will cause the browser to reload the page and you'll lose state.

By adding a submit event for el-form, the consuming component can run relevant code when the form submits.

[Leopoldthecoder]

When you hit enter in a form, it may not submit at all

When you have more than one input in a form, hitting enter does not trigger submit. That's how native <form> works: https://jsfiddle.net/hqhebLr7/

If it does, it will cause the browser to reload the page and you'll lose state

Also, that's how native <form> works: https://jsfiddle.net/hqhebLr7/1/

As a UI library, Element should not modify native behaviors. If an end user find such behaviors not desirable, he / she can prevent them himself / herself: https://jsfiddle.net/5juyoewh/1/ .

In your issue #5907 :

<el-form @submit="send">
    ...
    <el-button @click="send">Send</button>
</el-form>

The submit event handler's not working because of this. So it should be @submit.native.prevent.

[kkinder]

When you have more than one input in a form, hitting enter does not trigger submit. That's how native

works: https://jsfiddle.net/hqhebLr7/

That's true, but (1) you don't always only have one input, (2) it's highly undesirable in any SPA for a form to submit to the server as a traditional HTTP POST for the whole page.

You almost always want the enter key to validate the form and cause the default action to happen. In any SPA, you assuredly don't want the default browser behavior.

Try for example the github login page. Google login page. Signup page for Githab. Each one submits on enter. If you weren't typing your comment in a multi-line textbox, it too would submit on enter.

The submit event handler's not working because of this. So it should be @submit.native.prevent.

That's an option, but it leaves the default documentation to cause some pretty bad behavior. Here's an example directly from the Element docs:

https://jsfiddle.net/u8sqnofo/

I took out all but one field. If you fill out the form and hit enter, the whole page reloads.

That's native browser behavior, but for a single page app, you'd essentially never want it. And, there are almost no situations where tapping enter shouldn't activate a submit-like action. (I was quite surprised the default form examples didn't submit on enter.)

[yuyichen]

遇到同样的问题,排查了好久,只有一个el-input时居然会有这种奇怪的bug,表示有点不可思议

[kkinder]

@yuyichen , that's because unless there's an or widget on the form, enter only triggers a form submission when there's one field.

Either way, a reasonable expectation is that enter should submit the form. A default button is just extra clarity.

[juanvillegas]

What is the status of this? I'm using ^1.4.1 and I can't get the "enter" key to submit the form..

[Leopoldthecoder]

We'll keep the default behavior as is.

[fritx]

@Leopoldthecoder @kkinder

When you have more than one input in a form, hitting enter does not trigger submit. That's how native

works: https://jsfiddle.net/hqhebLr7/

I used to do it the simplest way I think, so I didn't have to write redundant click and keydown handlers. Only one submit handler is fine.

<form @submit.prevent="handleSubmit">
  <input>
  <textarea></textarea>
  <button type="submit">Done</button>
</form>

The browser would help you handle well, including inputs and textareas.

1. If you hit enter in textarea, it would cause a linebreak in it.
2. If you hit enter in the other place inside the form, it would just submit, no matter how many inputs are there.

See https://jsfiddle.net/ket34b9h/.

Unluckily, docs of element-ui never consider keydown events when doing form submits:
http://element.eleme.io/#/en-US/component/form

I think it would lead to a better user-experience if we listen on the keyboards.
Now I'm trying this in element-ui:

<el-form @submit.native.prevent="handleSubmit">
  <!-- fields -->
  <el-button type="primary" native-type="submit">Done</el-button>
</el-form>

[levy9527]

@fritx thx your answer, it works👏🎉

[p2yang]

Maybe the doc's demo should be improved.