button value binding does not work if button has nested elements

[miyconst]

On my page I have a button:

<button onclick="++this.value" value="{{model.value::click}}">++</button>

The purpose of the button is to increase model.value by one and notify Polymer about the change. The code above works fine, but this one does not work:

<button onclick="++this.value" value="{{model.value::click}}">
    <i>{{model.value}}</i>
    <span>++</span>
</button>

If button has any nested elements, then model.value became undefined on click. Here is a jsfiddle which demonstrates the issue: https://jsfiddle.net/z1knafu5/.

[dfreedm]

I'd suggest not using onclick here. I'm not 100% sure what part of the data binding system is unhappy with your solution, but here is a nearly-identical working example that uses the data-binding APIs
https://jsfiddle.net/thaL2515/

[miyconst]

@azakus,

I know that JavaScript function instead of inline event handler works correct, but in our system we use integer properties to trigger button click on server side.

It is really annoying to add click function for each button to just increment a value.

[zoechi]

Why don't you create a fancy-button that does that and reuse it everywhere?

[miyconst]

Well, I did something like this, but the exception with binding is still there and should be fixed.

[jwillmer]

This is really annoying and it took me again half a day of debugging to find the problem. Could someone fix this? It can’t be to complicated.

[diliger]

+1

[warpech]

+1. Just spend 2 hours debugging this case :(

[tomalec]

I suspect it's something related to event delegation/ event target handling, as existence of nested element does not break a thing, but clicking on the element inside which may not be bound to anything breaks it:
https://jsfiddle.net/tomalec/6w7tu42h/1/

[jfrazzano]

Organically a button's value is the buttons name. You can use other props or reset value.

I have a universal input which does everything from buttons, toggles, papering icon buttons, check boxes radio groups native selects with items entered as atts or nested dom repeats.

For buttons I find using a section or span or similar to wrap an icon is easiest And allows for a button set based on CSS classes which I assign at Dom repeat instance no via input type tied classes and secondary classes in another on top prop.

The button value like the radio ad check box value are just not "value tied" natively so a secondary prop is the usual method. If you monkey with it you could more or less do anything.

It's up to you really

Sent from my iPhone

On Feb 11, 2016, at 1:11 PM, Tomek Wytrębowicz [email protected] wrote:

I suspect it's something related to event delegation/ event target handling, as existence of nested element does not break a thing, but clicking on the element inside which may not be bound to anything breaks it:
https://jsfiddle.net/tomalec/6w7tu42h/1/

—
Reply to this email directly or view it on GitHub.

[aloscha]

+1

[Mackiovello]

+1 extremely annoying bug

[TimvdLippe]

This issue has been addressed in #5308 and will be fixed in 2.x and 3.x. Therefore I am closing this issue, as it targets 1.x. Please update your version of Polymer once we have released the fixes.