Table elements in hidden dom elements forever invisible

[dmurph]

Hello,

I have a strange situation where only the first usage of iron-data-table renders in my webpage. All subsequent usages are blank - they have the 400px height, but they don't have anything rendered. Does this ring a bell for anything?

Edit: here is how to repro:

polymer init
(choose blank application, yes at all prompts)
bower install --save Saulis/iron-data-table

Then replace the -app.html file with the attached file (or copy paste from below)
test2-app.txt

Daniel

[dmurph]

I used the polymer-cli to install the simple blank application, then I added iron-data-table as a dependency. This was what I made the application page.

Expected: Two of the same table to show up
Actual: just one table, but with space for both

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-data-table/iron-data-table.html">

<dom-module id="test2-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <h2>Hello [[prop1]]</h2>

    <iron-data-table items="[[records.items]]">
      <data-table-column name="Letter">
        <template>[[item.name]]</template>
      </data-table-column>
    </iron-data-table>
    <iron-data-table items="[[records.items]]">
      <data-table-column name="Letter">
        <template>[[item.name]]</template>
      </data-table-column>
    </iron-data-table>
  </template>

  <script>
    Polymer({

      is: 'test2-app',

      properties: {
        prop1: {
          type: String,
          value: 'test2-app',
        },
        records: {
          type: Object,
          value: {
            items: [{name:'a'}, {name:'b'}, {name:'c'}],
          },
        }
      },

    });
  </script>
</dom-module>

[dmurph]

I just added repro steps to the top comment to make it easier.

[dmurph]

This seems to be a non-issue for vaadin-grid, below is the file replaced with vaadin-grid v2.0.0-alpha:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/vaadin-grid/vaadin-grid.html">

<dom-module id="test2-app">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <h2>Hello [[prop1]]</h2>

    <vaadin-grid id="table1" items="[[records.items]]">
      <vaadin-grid-column>
        <template class="header">Letter</template>
        <template>[[item.name]]</template>
      </vaadin-grid-column>
    </vaadin-grid>

    <vaadin-grid id="table2" items="[[records.items]]">
      <vaadin-grid-column>
        <template class="header">Letter</template>
        <template>[[item.name]]</template>
      </vaadin-grid-column>
    </vaadin-grid>
  </template>

  <script>
    Polymer({

      is: 'test2-app',

      properties: {
        prop1: {
          type: String,
          value: 'test2-app',
        },
        records: {
          notify: true,
          type: Object,
          value: {
            items: [{name:'a'}, {name:'b'}, {name:'c'}],
          },
          reflectToAttribute: true,
        }
      },
      ready: function() {
        console.log("attached called");
        var $this = this;
        var t = setTimeout(function() {
          $this.push('records.items', {name: 'd'})
          console.log('added object');
          $this.notifyPath('records.items');
          var t1 = document.querySelector("#table1");
          var t2 = document.querySelector("#table2");
          // t1.clearCache();
          // t2.clearCache();
        }, 1000);
      }

    });
  </script>
</dom-module>

[dmurph]

I'm guessing this has something to do with the root cause of vaadin/vaadin-grid#657

The grid isn't visible when it's activated.