Search code examples
polymerpaper-elementsiron-elements

<iron-label> not forwarding taps to <paper-radio-button>


<div class="center horizontal layout">
      <iron-label>
        paper radio button
        <paper-radio-button noink iron-label-target>Radio</paper-radio-button>
      </iron-label>
</div>

Clicking on text paper radio button not forwarding clicks to the radio button but the documentation says: All taps on the iron-label will be forwarded to the "target" element.


Solution

  • It's working in this JS Bin for me.

    <!doctype html>
    <html>
    
    <head>
      <meta name="description" content="http://stackoverflow.com/questions/37816458">
      <meta charset="utf-8">
      <base href="http://polygit.org/components/">
      <script href="webcomponentsjs/webcomponents-lite.min.js"></script>
      <link href="polymer/polymer.html" rel="import">
      <link href="iron-label/iron-label.html" rel="import">
      <link href="paper-radio-button/paper-radio-button.html" rel="import">
    </head>
    
    <body>
      <dom-module id="my-el">
        <template>
          <iron-label>
            clicking here should forward tap to paper-radio-button
            <paper-radio-button noink iron-label-target on-tap="radioButtonTapped">Radio</paper-radio-button>
          </iron-label>
        </template>
        <script>
          Polymer({
            is: 'my-el',
            radioButtonTapped: function (e) {
              console.log('tap');
            }
          });
        </script>
      </dom-module>
      <my-el></my-el>
    </body>
    
    </html>
    

    https://jsbin.com/juzewi/edit?html,console,output