Selected item becomes deselected when updated in firebase

[albertolobrano]

Steps to reproduce the issue:

1. create an iron-list binded to a firebase collection element
2. select an item
3. update the item in firebase
4. the selected item becomes unselected

Firebase collection uses : this.splice('data', this.data.indexOf(oldValue), 1, value); when it needs to update a value. Iron list as a result will delete and add the element to the list and in the process it will deselect.

I am not sure if this is an issue with the list or if the firebase component that maybe should use something more clever then splice. I am not an expert so i will live you this decision to you.

[albertolobrano]

Little bit more information on this.

Firebase collection will invoke splice when it updates an item as it is shown in the following code line: this.splice('data', this.data.indexOf(oldValue), 1, value);

The list will then deselect the element as it is removed from the array.

_adjustVirtualIndex: function(splices) {
var i, splice, idx;

  for (i = 0; i < splices.length; i++) {
    splice = splices[i];

    // deselect removed items
    splice.removed.forEach(this.$.selector.deselect, this.$.selector);

    idx = splice.index;
    // We only need to care about changes happening above the current position
    if (idx >= this._virtualStartVal) {
      break;
    }

    this._virtualStart = this._virtualStart +
        Math.max(splice.addedCount - splice.removed.length, idx - this._virtualStartVal);
  }
},

What would be the best way to solve this issue? should we change the iron-list code to be smarter or the firebase collection should not call splice and do something different when updating an object ?

[blasten]

@albertolobrano This is tricky because calling splice will result on deselection since the old item was removed from the collection. Alternatively, the firebase collection element could use set to notify the changes or you may have to select the item again if it was selected before the update. I will ask @cdata as he knows more about the firebase element.

[albertolobrano]

Right now i added some logic to my component that re-select the item if it was selected. Let's see what @cdata thinks about it.

[IchordeDionysos]

Some kind of this problem appears to me:

I have a iron-list which lists data from Firebase (with Firebase a problem didn't appear, but I haven't updated my data via Firebase)
and from that list I want to grab one list element with all his data stored,
so I used selected-item="{{selected}}" and
when I want to change the content of selected using an paper-input,
I could make one change to my Element/String on Firebase (e.g. delete/add one character),
but then I lose connection to the selected-attribute and the value of the input got an empty String.

My code:
https://github.com/IchordeDionysos/social-contacts
Files especially important for you:
https://github.com/IchordeDionysos/social-contacts/blob/master/app/elements/books/books-list/books-list.html
https://github.com/IchordeDionysos/social-contacts/blob/master/app/elements/books/book-dialog/book-dialog.html

It is pretty annoying!!!

[albertolobrano]

Yes this the issue that i reported. What it is happening is that when you update the object with the paper-input firebase will be notified and will update it self. When it does it i will remove and add the element to the list and it will become deselected

[albertolobrano]

This is what i did to solve the issue. It is ugly but it works until the issue will be fixed upstream

    oldSpySelection: Object,
    oldSpySelectedIndex: Number,

_updateSelectedItem: function(item, old) {

      this.trace('Item notification received item value is ', {
        item: item,
        oldSpyItem: this.oldSpySelection,
        oldSpyIndex: this.oldSpySelectedIndex,
        old: old
      });

      //this happens the first time we lunch the app. We do not trow any envent
      if (!item && !old) {
        return;
      }

      //this happen when we deselect an item in the detail view. we do not need to do anything
      if (!item && !this.oldSpySelection) {
        return;
      }

      //item is null and old is populated
      //this is either a case where
      // 1) the selected item was updated in firebase or
      // 2) we deselected the item
      // 3) we are selecting another element.  in the next interaction
      // the indexes will be different and we will deselect this
      //in both case we do not allow it so we need to reselect it our selfs
      // here using the spy index
      if (!item && old) {
        this.$.itemsList.selectItem(this.oldSpySelectedIndex);
        return;
      }

      //this is the very first thing it will happen when we click an item
      if (item && !old) {
        this.oldSpySelectedIndex = this.items.indexOf(item);
        this.oldSpySelection = item;
        this.trace('Fire ItemSelected event');
        this.fire('itemSelected', {item: item});
        return;
      }

      var itemIndex = this.items.indexOf(item);

      //if the spy index and the item index is the same then we update the item
      // or deselected and reselected.
      if (this.oldSpySelectedIndex === itemIndex) {
        this.oldSpySelection = item;
      } else {
        var oldIndex = this.oldSpySelectedIndex;
        this.oldSpySelectedIndex = itemIndex;

        this.$.itemsList.deselectItem(oldIndex);
      }

    }

[blasten]

I hope @cdata could help here.

[cdata]

This should probably be filed against GoogleWebComponents/firebase-element repo.

[blasten]

moved!