0

I have a list of items listed using iron-list. The items in the iron-list are expandable, for every item there is an edition form.

There is also the possibility of creating a new item by pressing a general 'Add' button. Then, a new item will be added to the list using the method this.push('items', newItem).

The push of the new item works fine, the list is updated.

I would like that after pushing a new item the form corresponding to the item to expand immediately. So when the user want's to create a new item to see the creation form right away.

In order to expand the form for an item I simply grab the index of the iron-list from the DOM (item 0 index 0, item 1, index 1...), then I add a css class that will expand it.

The problem that I have is that between the pushing of the item and the calling of the method that will expand the item, the DOM isn't rendered yet so there is no index in the iron-list corresponding to the newly created item.

Is there a part of the element's lifecycle that I missed? After research I didn't found methods for forcing the rendering of the iron-list or the refresh... Could anyone give me an idea about how to expand the form immediately after pushing the item into the array?

gabriela
  • 285
  • 1
  • 2
  • 12
  • Please add some code that demonstrates what you try to accomplish and that allows to reproduce your issue. – Günter Zöchbauer Apr 04 '16 at 13:48
  • Hi Gunter, the cody is pretty complicated to reproduce... Basically I would like to know if there is a way to wait for the rendering of the DOM then to trigger a mouse click event on it – gabriela Apr 04 '16 at 13:50
  • If it's too complicated to add it to the question it's even more probably being way to complicated for people reading your question to reason about it, especially without seeing your code. Try to reduce it to a simple example that fits into your question. I also don't understand what you mean by " wait for the rendering of the DOM then to trigger a mouse click event on it". – Günter Zöchbauer Apr 04 '16 at 13:56

1 Answers1

0

This code expands whenever the the expanded variable equals the ID, requires unique IDs, could be name or whatever(I'd advise using whatever your database provides). Automatically expands the object by setting expanded equal to the ID of the recently created object.

<dom-module id="my-list">
   <template>
     <iron-list items="{{myItems}}">
       <my-item 
           on-tap="select"
           expaned="[[areEqual(item.id, expanded]]">
           [[item.name]]
        </my-item>
     </iron-list>
      .... add stuff ....
  </template>
</dom-module>
<script>
  (function() {
     Polymer({
       is: 'my-list',

        properties: {
          expanded: {
           type: string,
           value: ""
          }
        },
        onAdd: function(adding){
         ... adding code...
         this.expanded = this.adding.id;
        },

        areEqual: function(a, b){
         return a === b;
        },

        select: function(e){
         this.expanded = e.model.id;
        }
      })
  }())
</scipt>
ShaBANG
  • 193
  • 1
  • 11
  • Thank you ShaBANG for your response. I was using the ID to expand the items, but my list has more then 1000 items. When iron-list creates the list it creates 20 items (20 ids) that will be reused when we scroll in the list. So, if I scroll at the end of the list (item 1000 with id from database 1000) and try to expande it using the id it wouldn't work because iron-list demands for id 19 and not 1000. I found a solution in the demo source code of the iron-list in file selection.html. There, for selectiong an item instead of using the id they use e.model.item. This solved my problem :) – gabriela Apr 06 '16 at 10:16