option for default form submit behaviors about paper-button HOT 9 CLOSED

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

from paper-button.

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?

from paper-button.

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.

from paper-button.

@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>

from paper-button.

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.

from paper-button.

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 :)

from paper-button.

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 [email protected] 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
#69 (comment)
.

from paper-button.

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 :)

from paper-button.

Ah, too bad!

On Tue, Jan 26, 2016 at 5:40 PM, elegos [email protected] 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
#69 (comment)
.

from paper-button.