Click event not fired for paper-button when rendered using lightDom

[jouni]

From: https://vaadin.com/forum#!/thread/10447255

<v-grid id="dataGrid" selection-mode="single" frozen-columns="2">
  <table>
    <colgroup>
      <col header-text="#" width="52">
      <col width="60">
      <col header-text="First Name" sortable="true">
      <col header-text="Last Name">
      <col header-text="Email">
      <col header-text="Phone">
    </colgroup>
    <tbody>
      <template id="tableData" is="dom-repeat" items="{{data}}">
        <tr>
          <td>{{index}}</td>
          <td>
            <paper-icon-button icon="delete" on-click="handleTableClick"></paper-icon-button>
          </td>
          <td>{{item.name}}</td>
          <td>{{item.text}}</td>
          <td>{{item.name}}</td>
          <td>{{item.text}}</td>
        </tr>
      </template>
    </tbody>
  </table>
</v-grid>

The problem is most likely the fact that the on-click handler is lost when we copy the light DOM HTML content into the actual final render tree.

As a workaround, add the paper-icon-button using a JavaScript renderer:

<script>
  // TODO get the correct grid reference
  dataGrid.columns[1].renderer = function(cell) {
    // Clear any previous elements (you could also re-use the previous paper-icon-button)
    cell.element.innerHTML = "";

    // Create the paper-icon-button
    var button = document.createElement("paper-icon-button");
    button.setAttribute("icon", "delete");

    // TODO add the correct reference to the click handler
    button.addEventListener("click", handleTableClick);

    // Add it to the cell
    cell.element.appendChild(button);

    // Access the row index
    // NOTE: see issue #21 (https://github.com/vaadin/components/issues/21)
   cell.row.index;
  }
</script>

[amahdy]

I was able to reproduce this issue with this code placed after <v-grid>:

<script>
  var bind = document.querySelector('#tableData');
  bind.handleTableClick = function(e) {
    console.log("Clicked");
  }
</script>

I think the problem is that, the JS code gets executed after the template has been already rendered.

Running this code without v-grid, I can see that on-click is stripped off as well, but already been bound to handleTableClick function.

[tomivirkki]

v-grid styles hide the actual table-element that's produced by Polymer (inside the ). All the cells inside the visible grid are created&rendered by the Grid itself and the light dom data cells are parsed only for the contained data, ignoring any attributes.

[jouni]

This is a “wont fix” for 1.x, unfortunately. 2.0 will fix this issue.