option for default form submit behaviors

[jab]

paper-button does not currently include an actual native button (or <input type=submit>) element. As a result, simply including a paper-button inside a form is not sufficient for being able to submit the form by pressing enter from one of the inputs. So currently, hooking this default behavior back up has to be done manually. Similarly, the click handler of a paper-button inside a form must currently be bound to the form's submit manually.

What if users could just write something like:

<form>
  <!-- behavior 1: pressing enter while the cursor is in this input should submit the form -->
  <input name="name" required>
  <!-- behavior 2: clicking this button should submit the form -->
  <paper-button default-submit>
</form>

and that default-submit attribute would cause the default behaviors above to just work.

For behavior 1, it looks like simply including a native <input type=submit hidden> anywhere inside the form would do the trick. So could paper-button just add this element to its dom tree when default-submit is desired? Then, the paper-button's onclick could just call click() on the (hidden) native submit input to take care of behavior 2.

Note, I believe this is orthogonal to (but would nicely complement) PolymerElements/iron-form#46.

I'd be happy to try to work up a PR if there is interest. What do you think?

[notwaldorf]

I don't think this will work in the Shadow DOM. Since the hidden input is inside the paper-button's shadow DOM, it isn't visible to the form, so behaviour 1 won't actually work

[jab]

Thanks for taking a look @notwaldorf, and that's too bad. Is there another way to get this to work? Do you think this would be valuable to support?

[jab]

A possible workaround in the meantime: put <paper-button> inside a native <button>:

• demo
• code

You have to add styles to the containing button so it doesn't show up, but still useful maybe.

[keanulee]

@jab I think that's a good workaround. Adding <form> compatibility to <paper-button> will add complexity (and performance cost) that wouldn't be needed for other use cases. Remember to also set tabindex="-1" in the wrapping <button> tag to make sure it can't get focus (since <paper-button> will receive focus anyways).

<button style="border:none; background:none;" tabindex="-1">
  <paper-button raised>Submit</paper-button>
</button>

[jab]

Thanks @keanulee, great point!

@elegos, I just came across your https://github.com/elegos/paper-submit component. Thought you might be interested to know about the technique above, which doesn't require any javascript to accomplish the same thing.

[elegos]

Hello @jab thanks for pointing it out for me. In my humble opinion though, I prefer to write crystal-clear HTML documents (that's part of the web components idea). Adding a paper-button inside of a button means creating an ugly workaround.

Yes of course my solution is not perfect (in the end it creates a DOM element in any case), but at least the web designer doesn't have to bother about DOM artifacts by his/her own in the writing.

Last but not least you have to create a class for those buttons to "hide" them... Even though your idea is clever, I'll stick with my paper-submit for now, hoping that paper-button will be able to submit forms one day :)

[jab]

I meant in case you could change your webcomponent to do this under the hood, which would be much simpler than your implementation. But maybe I'm missing something.

On Tuesday, January 26, 2016, elegos notifications@github.com wrote:

Hello @jab https://github.com/jab thanks for pointing it out for me. In my humble opinion though, I prefer to write crystal-clear HTML documents (that's part of the web components idea). Adding a paper-button inside of a button means creating an ugly workaround.

Yes of course my solution is not perfect (in the end it creates a DOM element in any case), but at least the web designer doesn't have to bother about DOM artifacts by his/her own in the writing.

Last but not least you have to create a class for those buttons to "hide" them... Even though your idea is clever then, I'll stick with my paper-submit for now, hoping that paper-button will be able to submit forms one day :)

— Reply to this email directly or view it on GitHub https://github.com/PolymerElements/paper-button/issues/69#issuecomment-175268219 .

[elegos]

Yep, you're missing that a button has to be re-styled. You can't anticipate which CSS the developer will write for the button tag, not only the default styling. I remember in my tests I started out like you embedding the element inside a button, but ended up with that solution due to style problems :) (if I'm not wrong there was even behaviour inconsistency in the various browsers)

EDIT: I'll do my tests again (not using Polymer by a while TBH) and I'll eventually edit the git - or do it yourself and post a PR :)

[jab]

Ah, too bad!

On Tue, Jan 26, 2016 at 5:40 PM, elegos notifications@github.com wrote:

Yep, you're missing that a button has to be re-styled. You can't anticipate which CSS the developer will write for the button tag, not only the default styling. I remember in my tests I started out like you embedding the element inside a button, but ended up with that solution due to style problems :)

— Reply to this email directly or view it on GitHub https://github.com/PolymerElements/paper-button/issues/69#issuecomment-175273523 .