submitting paper-form with enter key

[jpaas]

I just spent a lot of hours trying to make my paper-form component using 1.0.0.alpha.3 submit with the enter key and in the end I found the magical incantation, but I'm left wondering if maybe paper-form should make this easier, or at least document it.

Here is the only way I could make it work:

  {{#paper-form onSubmit="submit" as |form|}}
    <form {{action form.onSubmit on="submit"}}>
        {{paper-input label="Email" onChange=(action (mut identification)) value=identification}}
        {{paper-input label="Password" onChange=(action (mut password)) type="password" value=password}}
        {{#paper-button disabled=form.isInvalid type="submit"}}Signin{{/paper-button}}
    </form>
  {{/paper-form}}

[BennyAlex]

this causes that the action 'submit' will fired two times

Sorry I had the action still in the paper-button

[miguelcobain]

<form onsubmit={{action form.onSubmit}}>

should also work.

I'm open to suggestions on how this could be made easier.
paper-form is tagless, which makes it difficult to listen for key events. Maybe we should make it have a tag and listen for enter key presses?

[jpaas]

It would be nice to have enter key submission "just work" by default. If that means generating a form tag, is there any downside?

[miguelcobain]

Possibly some style issues can arise. The markup won't be the same.

[jpaas]

If you're unsure, then just maybe just add a section to the docs?

[miguelcobain]

I think the benefits outweigh the cons (if any). So, I could take a PR for this + tests. :)

[jpaas]

@miguelcobain Sorry but I don't think I'll have time. I've moved onto a new project.

[miguelcobain]

@shoxter what is your opinion on this?

[shoxter]

@miguelcobain I think it's a good idea.

What if we add an action to the form that looks for the enter key being pressed (the event is passed in) and set the input(s) the user wants to have access to it to having the submit action (i.e. form.submit)?

[miguelcobain]

@shoxter another idea would be to use tagName: 'form' and then use the onSubmit event.
Is there any harm that could come from this?

onSubmit triggers on enter keypresses and on button type="submit" submits. Also, it would be better for accessibility.

[shoxter]

@miguelcobain The primary issue I foresee as being problematic is styling.

For example, in my personal application I wrap entire paper-dialogs in paper-form for validation purposes.

It's very flexible without a tag. This goes away when we add one.

Do you have any alternative methods off the top of your head? If not, I'll think on it and see what I can come up with.

[miguelcobain]

Would it be harmful for styles to have a form tag in your dialog? We should be doing it any way for semantics/acessibility.

[ibarrick]

I think tagless is much more flexible, especially if the other use case can be achieved by just adding a form tag.

[panthony]

Any progress on this subject ?

When I try the following:

{{#paper-form onSubmit=(action 'submit') as |form|}}
  <form class="layout-row" {{action form.onSubmit on='submit'}}>
      {{form.input placeholder='placeholder' value=value onChange=(action (mutvalue))}}
     {{#form.submit-button raised=true primary=true type='submit'}}Submit{{/form.submit-button}}
  </form>
{{/paper-form}}

Using the latest alpha release I get:

ember.debug.js:6628 DEPRECATION: You modified (hash isValid=isValid isInvalid=isInvalid input=(component "paper-input" parentComponent=(mut ) onValidityChange=(action "onValidityChange")) submit-button=(component "paper-button" onClick=(action "onSubmit")) select=(component "paper-select" parentComponent=(mut ) onValidityChange=(action "onValidityChange")) autocomplete=(component "paper-autocomplete" parentComponent=(mut ) onValidityChange=(action "onValidityChange")) onSubmit=(action "onSubmit")).onSubmit twice in a single render. This was unreliable in Ember 1.x and will be removed in Ember 3.0 [deprecation id: ember-views.render-double-modify]

I'm left wondering how to properly use {{paper-form}}.

[miguelcobain]

@panthony did you check the docs on paper-form? http://miguelcobain.github.io/ember-paper/release-1/#/forms
Let me know what isn't clear.

[panthony]

I did check the docs but a form done this way cannot be submitted by pressing enter. Or at least it did not for me.

The warning comes from this for me:

  {{#paper-form onSubmit="submit" as |form|}}
    <form {{action form.onSubmit on="submit"}}>

But since the comment is rather old I was wondering if it was still the way to do it.

I ended up ignoring the 'onSubmit' attribute of the paper-form to avoid this deprecation warning.

{{#paper-form |form|}}
  <form class="layout-row" {{action (action 'submit') on='submit'}}>

I think the only thing i loose is the submit action that does not fire if an input is invalid.

[miguelcobain]

@panthony doesn't this work for you?

{{#paper-form onSubmit="submit" as |form|}}
  <form onsubmit={{action form.onSubmit}}>
    {{form.input label="Name" value=name onChange=(action (mut name)) required=true}}
    {{#form.submit-button raised=true primary=true}}
      Submit
    {{/form.submit-button}}
  </form>
{{/paper-form}}

[panthony]

@miguelcobain No it does not work.

• there is a deprecation warning about ember-views.render-double-modify with every user interaction with the input
• the form won't submit when I press enter

I can fix the later by adding type="submit" on the submit-button but the deprecation issue remains.

[miguelcobain]

@panthony

I can fix the later by adding type="submit" on the submit-button but the deprecation issue remains.

Makes sense. We aren't setting type to "submit" in our yielded button. Can you please PR that type="submit" here: https://github.com/miguelcobain/ember-paper/blob/master/app/templates/components/paper-form.hbs#L9 ?

[panthony]

@miguelcobain done with #568

[jamesdixon]

To add some additional information to this thread, when using:

<form onsubmit={{action form.onSubmit}}>

and submitting my form, the url that's submitted is something like https://localhost:4200/? (not the ?), which causes the action to be cancelled and I'm returned back to the same form.

However, using <form {{action form.onSubmit on="submit"}}> works as expected.

Also, the deprecation still remains regardless.

[miguelcobain]

@jamesdixon you probably need to preventDefault on the first approach. Can you try that?

[jamesdixon]

@miguelcobain ill give it a try. thank you!

[ghost]

Working like a charm :) Thanks @jamesdixon

[BennyAlex]

@miguelcobain
given the following form

{{#paper-form onSubmit=(action "addNumber" number  preventDefault=false) as |form|}}
 <form onsubmit={{action form.onSubmit preventDefault=false}}>
  {{form.input label="Nummer" value=number onChange=(action (mut number)) customValidations=phoneValidation}}
  {{#form.submit-button raised=true primary=true disabled=(or form.isInvalid (not number)) onClick=(action "addNumber" number  preventDefault=false)}}
   submit
  {{/form.submit-button}}
 </form>
{{/paper-form}}

The page will be 'reloaded' when hit the enter button...

@jamesdixon @miguelcobain

using <form {{action form.onSubmit on="submit"}}> works with enter, but the submit action will be triggered twice...

[miguelcobain]

@BennyAlex Why are you preventDefault=false? The default submit action is to change URL and POST, etc. This needs to be prevented, so preventDefault=true should work.

using <form {{action form.onSubmit on="submit"}}> works with enter, but the submit action will be triggered twice...

This is maybe due to the preventDefault=false on the submit button action.

[BennyAlex]

@miguelcobain Of course I tried false and true, both doesnt work.

Also of reading this guide https://guides.emberjs.com/v2.10.0/templates/actions/, ember should prevent the default browser action by default...

[miguelcobain]

@BennyAlex

Also of reading this guide https://guides.emberjs.com/v2.10.0/templates/actions/, ember should prevent the default browser action by default...

as you can see in this twiddle, element space actions (like in that guide) are default prevented, but closure actions like onsubmit={{action are not:

https://ember-twiddle.com/c51d320ba02b121537dae467458fb6dd?openFiles=templates.application.hbs%2C

paper-form may need to be refactored so that this use case works out of the box :/

[BennyAlex]

@miguelcobain
@jamesdixon
Finally it work for me with <form onsubmit={{action form.onSubmit}}>, use enter button to submit , the action will not be triggered twice and you wont get redirected to another url (https://localhost:4200/?)

Here is my code:

//hbs
{{#paper-form onSubmit=(action "addMail" email) as |form|}}
<form onsubmit={{action form.onSubmit}}>
{{form.input label="E-Mail" value=email onChange=(action (mut email))
                             customValidations=emailValidation isTouched=true}}
{{#form.submit-button raised=true primary=true disabled=(or form.isInvalid (not email))
                                      onClick=(action "addMail" email)}}
submit
 {{/form.submit-button}}
</form>
{{/paper-form}}

//js
actions: {
  addMail(mail, event){
      event.preventDefault();
      console.log('add mail');
     //do something with the mail
    },
}

[panthony]

This issue seems resolved, maybe this ticket can be closed?