MD Settings: bump iron-list version.

third_party/polymer/v1_0/components-chromium/iron-list/iron-list-extracted.js

 (function() {
 
   var IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);
   var IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;
   var DEFAULT_PHYSICAL_COUNT = 3;
   var HIDDEN_Y = '-10000px';
   var ITEM_WIDTH = 0;
   var ITEM_HEIGHT = 1;
   var SECRET_TABINDEX = -100;
 
@@ skipping 94 matching lines @@
       },
 
       /**
        * When `true`, multiple items may be selected at once (in this case,
        * `selected` is an array of currently selected items).  When `false`,
        * only one item may be selected at a time.
        */
       multiSelection: {
         type: Boolean,
         value: false
+      },
+
+      /**
+       * The offset top from the scrolling element to the iron-list element.
+       * This value can be computed using the position returned by `getBoundingClientRect()`
+       * although it's preferred to use a constant value when possible.
+       *
+       * This property is useful when an external scrolling element is used and there's
+       * some offset between the scrolling element and the list.
+       * For example: a header is placed above the list.
+       */
+      scrollOffset: {
+        type: Number,
+        value: 0
       }
     },
 
     observers: [
       '_itemsChanged(items.*)',
       '_selectionEnabledChanged(selectionEnabled)',
       '_multiSelectionChanged(multiSelection)',
-      '_setOverflow(scrollTarget)'
+      '_setOverflow(scrollTarget, scrollOffset)'
     ],
 
     behaviors: [
       Polymer.Templatizer,
       Polymer.IronResizableBehavior,
       Polymer.IronA11yKeysBehavior,
       Polymer.IronScrollTargetBehavior
     ],
 
     keyBindings: {
@@ skipping 171 matching lines @@
 
     /**
      * The height of the physical content that isn't on the screen.
      */
     get _hiddenContentSize() {
       var size = this.grid ? this._physicalRows * this._rowHeight : this._physicalSize;
       return size - this._viewportHeight;
     },
 
     /**
+     * The parent node for the _userTemplate.
+     */
+    get _itemsParent() {
+      return Polymer.dom(Polymer.dom(this._userTemplate).parentNode);
+    },
+
+    /**
      * The maximum scroll top value.
      */
     get _maxScrollTop() {
-      return this._estScrollHeight - this._viewportHeight + this._scrollerPaddingTop;
+      return this._estScrollHeight - this._viewportHeight + this._scrollOffset;
     },
 
     /**
      * The lowest n-th value for an item such that it can be rendered in `_physicalStart`.
      */
     _minVirtualStart: 0,
 
     /**
      * The largest n-th value for an item such that it can be rendered in `_physicalStart`.
      */
     get _maxVirtualStart() {
       return Math.max(0, this._virtualCount - this._physicalCount);
     },
 
     /**
      * The n-th item rendered in the `_physicalStart` tile.
      */
     _virtualStartVal: 0,
 
     set _virtualStart(val) {
-      this._virtualStartVal = Math.min(this._maxVirtualStart, Math.max(this._minVirtualStart, val));
+      val = Math.min(this._maxVirtualStart, Math.max(this._minVirtualStart, val));
+      if (this.grid) {
+        val = val - (val % this._itemsPerRow);
+      }
+      this._virtualStartVal = val;
     },
 
     get _virtualStart() {
       return this._virtualStartVal || 0;
     },
 
     /**
      * The k-th tile that is at the top of the scrolling list.
      */
     _physicalStartVal: 0,
 
     set _physicalStart(val) {
-      this._physicalStartVal = val % this._physicalCount;
-      if (this._physicalStartVal < 0) {
-        this._physicalStartVal = this._physicalCount + this._physicalStartVal;
+      val = val % this._physicalCount;
+      if (val < 0) {
+        val = this._physicalCount + val;
       }
+      if (this.grid) {
+        val = val - (val % this._itemsPerRow);
+      }
+      this._physicalStartVal = val;
       this._physicalEnd = (this._physicalStart + this._physicalCount - 1) % this._physicalCount;
     },
 
     get _physicalStart() {
       return this._physicalStartVal || 0;
     },
 
     /**
      * The number of tiles in the DOM.
      */
@@ skipping 17 matching lines @@
      * An optimal physical size such that we will have enough physical items
      * to fill up the viewport and recycle when the user scrolls.
      *
      * This default value assumes that we will at least have the equivalent
      * to a viewport of physical items above and below the user's viewport.
      */
     get _optPhysicalSize() {
       if (this.grid) {
         return this._estRowsInView * this._rowHeight * this._maxPages;
       }
-      return this._viewportHeight * this._maxPages;
+      return this._viewportHeight === 0 ? Infinity : this._viewportHeight * this._maxPages;
     },
 
    /**
     * True if the current list is visible.
     */
     get _isVisible() {
       return Boolean(this.offsetWidth || this.offsetHeight);
     },
 
     /**
      * Gets the index of the first visible item in the viewport.
      *
      * @type {number}
      */
     get firstVisibleIndex() {
-      if (this._firstVisibleIndexVal === null) {
-        var physicalOffset = Math.floor(this._physicalTop + this._scrollerPaddingTop);
+      var idx = this._firstVisibleIndexVal;
+      if (idx == null) {
+        var physicalOffset = this._physicalTop + this._scrollOffset;
 
-        this._firstVisibleIndexVal = this._iterateItems(
-          function(pidx, vidx) {
-            physicalOffset += this._getPhysicalSizeIncrement(pidx);
+        idx = this._iterateItems(function(pidx, vidx) {
+          physicalOffset += this._getPhysicalSizeIncrement(pidx);
 
-            if (physicalOffset > this._scrollPosition) {
-              return this.grid ? vidx - (vidx % this._itemsPerRow) : vidx;
-            }
-            // Handle a partially rendered final row in grid mode
-            if (this.grid && this._virtualCount - 1 === vidx) {
-              return vidx - (vidx % this._itemsPerRow);
-            }
-          }) || 0;
+          if (physicalOffset > this._scrollPosition) {
+            return this.grid ? vidx - (vidx % this._itemsPerRow) : vidx;
+          }
+          // Handle a partially rendered final row in grid mode
+          if (this.grid && this._virtualCount - 1 === vidx) {
+            return vidx - (vidx % this._itemsPerRow);
+          }
+        }) || 0;
+        this._firstVisibleIndexVal = idx;
       }
-      return this._firstVisibleIndexVal;
+      return idx;
     },
 
     /**
      * Gets the index of the last visible item in the viewport.
      *
      * @type {number}
      */
     get lastVisibleIndex() {
-      if (this._lastVisibleIndexVal === null) {
+      var idx = this._lastVisibleIndexVal;
+      if (idx == null) {
         if (this.grid) {
-          var lastIndex = this.firstVisibleIndex + this._estRowsInView * this._itemsPerRow - 1;
-          this._lastVisibleIndexVal = Math.min(this._virtualCount, lastIndex);
+          idx = Math.min(this._virtualCount,
+              this.firstVisibleIndex + this._estRowsInView * this._itemsPerRow - 1);
         } else {
-          var physicalOffset = this._physicalTop;
+          var physicalOffset = this._physicalTop + this._scrollOffset;
           this._iterateItems(function(pidx, vidx) {
             if (physicalOffset < this._scrollBottom) {
-              this._lastVisibleIndexVal = vidx;
-            } else {
-              // Break _iterateItems
-              return true;
+              idx = vidx;
             }
             physicalOffset += this._getPhysicalSizeIncrement(pidx);
           });
         }
+        this._lastVisibleIndexVal = idx;
       }
-      return this._lastVisibleIndexVal;
+      return idx;
     },
 
     get _defaultScrollTarget() {
       return this;
     },
 
     get _virtualRowCount() {
       return Math.ceil(this._virtualCount / this._itemsPerRow);
     },
 
     get _estRowsInView() {
       return Math.ceil(this._viewportHeight / this._rowHeight);
     },
 
     get _physicalRows() {
       return Math.ceil(this._physicalCount / this._itemsPerRow);
     },
 
+    get _scrollOffset() {
+      return this._scrollerPaddingTop + this.scrollOffset;
+    },
+
     ready: function() {
       this.addEventListener('focus', this._didFocus.bind(this), true);
     },
 
     attached: function() {
       if (this._physicalCount === 0) {
         this._debounceTemplate(this._render);
       }
       // `iron-resize` is fired when the list is attached if the event is added
       // before attached causing unnecessary work.
       this.listen(this, 'iron-resize', '_resizeHandler');
     },
 
     detached: function() {
       this.unlisten(this, 'iron-resize', '_resizeHandler');
     },
 
     /**
      * Set the overflow property if this element has its own scrolling region
      */
     _setOverflow: function(scrollTarget) {
       this.style.webkitOverflowScrolling = scrollTarget === this ? 'touch' : '';
       this.style.overflow = scrollTarget === this ? 'auto' : '';
+      // Clear cache.
+      this._lastVisibleIndexVal = null;
+      this._firstVisibleIndexVal = null;
+      this._debounceTemplate(this._render);
     },
 
     /**
      * Invoke this method if you dynamically update the viewport's
      * size or CSS padding.
      *
      * @method updateViewportBoundaries
      */
     updateViewportBoundaries: function() {
+      var styles = window.getComputedStyle(this);
       this._scrollerPaddingTop = this.scrollTarget === this ? 0 :
-          parseInt(window.getComputedStyle(this)['padding-top'], 10);
+          parseInt(styles['padding-top'], 10);
+      this._isRTL = Boolean(styles.direction === 'rtl');
       this._viewportWidth = this.$.items.offsetWidth;
       this._viewportHeight = this._scrollTargetHeight;
       this.grid && this._updateGridMetrics();
     },
 
     /**
      * Recycles the physical items when needed.
      */
     _scrollHandler: function() {
       var scrollTop = Math.max(0, Math.min(this._maxScrollTop, this._scrollTop));
       var delta = scrollTop - this._scrollPosition;
       var isScrollingDown = delta >= 0;
       // Track the current scroll position.
       this._scrollPosition = scrollTop;
       // Clear indexes.
       this._firstVisibleIndexVal = null;
       this._lastVisibleIndexVal = null;
 
       // Random access.
       if (Math.abs(delta) > this._physicalSize) {
-        var idxAdjustment =  Math.round(delta / this._physicalAverage) * this._itemsPerRow
+        delta = delta - this._scrollOffset;
+        var idxAdjustment = Math.round(delta / this._physicalAverage) * this._itemsPerRow;
         this._physicalTop = this._physicalTop + delta;
         this._virtualStart = this._virtualStart + idxAdjustment;
         this._physicalStart = this._physicalStart + idxAdjustment;
         this._update();
       } else {
         var reusables = this._getReusables(isScrollingDown);
         if (isScrollingDown) {
           this._physicalTop = reusables.physicalTop;
           this._virtualStart = this._virtualStart + reusables.indexes.length;
           this._physicalStart = this._physicalStart + reusables.indexes.length;
@@ skipping 15 matching lines @@
      *
      * @param {boolean} fromTop If the potential reusable items are above the scrolling region.
      */
     _getReusables: function(fromTop) {
       var ith, lastIth, offsetContent, physicalItemHeight;
       var idxs = [];
       var protectedOffsetContent = this._hiddenContentSize * this._ratio;
       var virtualStart = this._virtualStart;
       var virtualEnd = this._virtualEnd;
       var physicalCount = this._physicalCount;
-      var physicalTop = this._physicalTop + this._scrollerPaddingTop;
+      var top = this._physicalTop + this._scrollOffset;
+      var bottom = this._physicalBottom + this._scrollOffset;
       var scrollTop = this._scrollTop;
       var scrollBottom = this._scrollBottom;
 
       if (fromTop) {
         ith = this._physicalStart;
         lastIth = this._physicalEnd;
-        offsetContent = scrollTop - physicalTop;
+        offsetContent = scrollTop - top;
       } else {
         ith = this._physicalEnd;
         lastIth = this._physicalStart;
-        offsetContent = this._physicalBottom - scrollBottom;
+        offsetContent = bottom - scrollBottom;
       }
       while (true) {
         physicalItemHeight = this._getPhysicalSizeIncrement(ith);
         offsetContent = offsetContent - physicalItemHeight;
         if (idxs.length >= physicalCount || offsetContent <= protectedOffsetContent) {
           break;
         }
         if (fromTop) {
           // Check that index is within the valid range.
           if (virtualEnd + idxs.length + 1 >= this._virtualCount) {
             break;
           }
           // Check that the index is not visible.
-          if (physicalTop + physicalItemHeight >= scrollTop) {
+          if (top + physicalItemHeight >= scrollTop - this._scrollOffset) {
             break;
           }
           idxs.push(ith);
-          physicalTop = physicalTop + physicalItemHeight;
+          top = top + physicalItemHeight;
           ith = (ith + 1) % physicalCount;
         } else {
           // Check that index is within the valid range.
           if (virtualStart - idxs.length <= 0) {
             break;
           }
           // Check that the index is not visible.
-          if (physicalTop + this._physicalSize - physicalItemHeight <= scrollBottom) {
+          if (top + this._physicalSize - physicalItemHeight <= scrollBottom) {
             break;
           }
           idxs.push(ith);
-          physicalTop = physicalTop - physicalItemHeight;
+          top = top - physicalItemHeight;
           ith = (ith === 0) ? physicalCount - 1 : ith - 1;
         }
       }
-      return { indexes: idxs, physicalTop: physicalTop - this._scrollerPaddingTop };
+      return { indexes: idxs, physicalTop: top - this._scrollOffset };
     },
 
     /**
      * Update the list of items, starting from the `_virtualStart` item.
      * @param {!Array<number>=} itemSet
      * @param {!Array<number>=} movingUp
      */
     _update: function(itemSet, movingUp) {
       if (itemSet && itemSet.length === 0) {
         return;
@@ skipping 21 matching lines @@
     _createPool: function(size) {
       var physicalItems = new Array(size);
 
       this._ensureTemplatized();
 
       for (var i = 0; i < size; i++) {
         var inst = this.stamp(null);
         // First element child is item; Safari doesn't support children[0]
         // on a doc fragment.
         physicalItems[i] = inst.root.querySelector('*');
-        Polymer.dom(this).appendChild(inst.root);
+        this._itemsParent.appendChild(inst.root);
       }
       return physicalItems;
     },
 
     /**
      * Increases the pool of physical items only if needed.
      *
      * @return {boolean} True if the pool was increased.
      */
     _increasePoolIfNeeded: function() {
-      // Base case 1: the list has no height.
-      if (this._viewportHeight === 0) {
-        return false;
-      }
       var self = this;
-      var isClientFull = this._physicalBottom >= this._scrollBottom &&
-          this._physicalTop <= this._scrollPosition;
-
-      // Base case 2: if the physical size is optimal and the list's client height is full
+      var isClientFull = this._physicalBottom + this._scrollOffset >= this._scrollBottom &&
+          this._physicalTop - this._scrollOffset <= this._scrollPosition;
+      // Base case 1: if the physical size is optimal and the list's client height is full
       // with physical items, don't increase the pool.
       if (this._physicalSize >= this._optPhysicalSize && isClientFull) {
         return false;
       }
       var maxPoolSize = Math.round(this._physicalCount * 0.5);
       // Increase the pool synchronously until the client is filled.
       if (!isClientFull) {
         this._debounceTemplate(this._increasePool.bind(this, maxPoolSize));
         return true;
       }
@@ skipping 73 matching lines @@
     _ensureTemplatized: function() {
       if (!this.ctor) {
         // Template instance props that should be excluded from forwarding
         var props = {};
         props.__key__ = true;
         props[this.as] = true;
         props[this.indexAs] = true;
         props[this.selectedAs] = true;
         props.tabIndex = true;
         this._instanceProps = props;
-        this._userTemplate = Polymer.dom(this).querySelector('template');
+        this._userTemplate = this.queryEffectiveChildren('template');
 
         if (this._userTemplate) {
           this.templatize(this._userTemplate);
         } else {
           console.warn('iron-list requires a template to be provided in light-dom');
         }
       }
     },
 
     /**
@@ skipping 14 matching lines @@
           path.slice(this.as.length + 1), value);
       }
     },
 
     /**
      * Implements extension point from Templatizer mixin
      * Called as side-effect of a host property change, responsible for
      * notifying parent path change on each row.
      */
     _forwardParentProp: function(prop, value) {
-      if (this._physicalItems) {
-        this._physicalItems.forEach(function(item) {
-          item._templateInstance[prop] = value;
-        }, this);
-      }
+      (this._physicalItems || [])
+        .concat([this._offscreenFocusedItem, this._focusBackfillItem])
+        .forEach(function(item) {
+          if (item) {
+            item._templateInstance[prop] = value;
+          }
+        });
     },
 
     /**
      * Implements extension point from Templatizer
      * Called as side-effect of a host path change, responsible for
      * notifying parent.<path> path change on each row.
      */
     _forwardParentPath: function(path, value) {
-      if (this._physicalItems) {
-        this._physicalItems.forEach(function(item) {
-          item._templateInstance.notifyPath(path, value, true);
-        }, this);
-      }
+      (this._physicalItems || [])
+        .concat([this._offscreenFocusedItem, this._focusBackfillItem])
+        .forEach(function(item) {
+          if (item) {
+            item._templateInstance.notifyPath(path, value, true);
+          }
+        });
     },
 
     /**
      * Called as a side effect of a host items.<key>.<path> path change,
      * responsible for notifying item.<path> changes.
      */
     _forwardItemPath: function(path, value) {
       if (!this._physicalIndexForKey) {
         return;
       }
@@ skipping 37 matching lines @@
         this._physicalTop = 0;
         this._virtualCount = this.items ? this.items.length : 0;
         this._collection = this.items ? Polymer.Collection.get(this.items) : null;
         this._physicalIndexForKey = {};
         this._firstVisibleIndexVal = null;
         this._lastVisibleIndexVal = null;
         this._physicalCount = this._physicalCount || 0;
         this._physicalItems = this._physicalItems || [];
         this._physicalSizes = this._physicalSizes || [];
         this._physicalStart = 0;
-        this._resetScrollPosition(0);
+        if (this._scrollTop > this._scrollOffset) {
+          this._resetScrollPosition(0);
+        }
         this._removeFocusedItem();
         this._debounceTemplate(this._render);
 
       } else if (change.path === 'items.splices') {
         this._adjustVirtualIndex(change.value.indexSplices);
         this._virtualCount = this.items ? this.items.length : 0;
 
         this._debounceTemplate(this._render);
-
       } else {
         this._forwardItemPath(change.path.split('.').slice(1).join('.'), change.value);
       }
     },
 
     /**
      * @param {!Array<!PolymerSplice>} splices
      */
     _adjustVirtualIndex: function(splices) {
       splices.forEach(function(splice) {
@@ skipping 144 matching lines @@
 
       var y = this._physicalTop;
 
       if (this.grid) {
         var totalItemWidth = this._itemsPerRow * this._itemWidth;
         var rowOffset = (this._viewportWidth - totalItemWidth) / 2;
 
         this._iterateItems(function(pidx, vidx) {
           var modulus = vidx % this._itemsPerRow;
           var x = Math.floor((modulus * this._itemWidth) + rowOffset);
+          if (this._isRTL) {
+            x = x * -1;
+          }
           this.translate3d(x + 'px', y + 'px', 0, this._physicalItems[pidx]);
           if (this._shouldRenderNextRow(vidx)) {
             y += this._rowHeight;
           }
         });
       } else {
         this._iterateItems(function(pidx, vidx) {
           this.translate3d(0, y + 'px', 0, this._physicalItems[pidx]);
           y += this._physicalSizes[pidx];
         });
@@ skipping 21 matching lines @@
     _shouldRenderNextRow: function(vidx) {
       return vidx % this._itemsPerRow === this._itemsPerRow - 1;
     },
 
     /**
      * Adjusts the scroll position when it was overestimated.
      */
     _adjustScrollPosition: function() {
       var deltaHeight = this._virtualStart === 0 ? this._physicalTop :
           Math.min(this._scrollPosition + this._physicalTop, 0);
-
-      if (deltaHeight) {
+      // Note: the delta can be positive or negative.
+      if (deltaHeight !== 0) {
         this._physicalTop = this._physicalTop - deltaHeight;
+        var scrollTop = this._scrollTop;
         // juking scroll position during interial scrolling on iOS is no bueno
-        if (!IOS_TOUCH_SCROLLING && this._physicalTop !== 0) {
-          this._resetScrollPosition(this._scrollTop - deltaHeight);
+        if (!IOS_TOUCH_SCROLLING && scrollTop > 0) {
+          this._resetScrollPosition(scrollTop - deltaHeight);
         }
       }
     },
 
     /**
      * Sets the position of the scroll.
      */
     _resetScrollPosition: function(pos) {
-      if (this.scrollTarget) {
+      if (this.scrollTarget && pos >= 0) {
         this._scrollTop = pos;
         this._scrollPosition = this._scrollTop;
       }
     },
 
     /**
      * Sets the scroll height, that's the height of the content,
      *
      * @param {boolean=} forceUpdate If true, updates the height no matter what.
      */
@@ skipping 31 matching lines @@
      * Scroll to a specific index in the virtual list regardless
      * of the physical items in the DOM tree.
      *
      * @method scrollToIndex
      * @param {number} idx The index of the item
      */
     scrollToIndex: function(idx) {
       if (typeof idx !== 'number' || idx < 0 || idx > this.items.length - 1) {
         return;
       }
-
       Polymer.dom.flush();
       // Items should have been rendered prior scrolling to an index.
       if (this._physicalCount === 0) {
         return;
       }
       idx = Math.min(Math.max(idx, 0), this._virtualCount-1);
       // Update the virtual start only when needed.
       if (!this._isIndexRendered(idx) || idx >= this._maxVirtualStart) {
         this._virtualStart = this.grid ? (idx - this._itemsPerRow * 2) : (idx - 1);
       }
       this._manageFocus();
       this._assignModels();
       this._updateMetrics();
       // Estimate new physical offset.
       this._physicalTop = Math.floor(this._virtualStart / this._itemsPerRow)  * this._physicalAverage;
 
       var currentTopItem = this._physicalStart;
       var currentVirtualItem = this._virtualStart;
       var targetOffsetTop = 0;
       var hiddenContentSize = this._hiddenContentSize;
       // scroll to the item as much as we can.
       while (currentVirtualItem < idx && targetOffsetTop <= hiddenContentSize) {
         targetOffsetTop = targetOffsetTop + this._getPhysicalSizeIncrement(currentTopItem);
         currentTopItem = (currentTopItem + 1) % this._physicalCount;
         currentVirtualItem++;
       }
       this._updateScrollerSize(true);
       this._positionItems();
-      this._resetScrollPosition(this._physicalTop + this._scrollerPaddingTop + targetOffsetTop);
+      this._resetScrollPosition(this._physicalTop + this._scrollOffset + targetOffsetTop);
       this._increasePoolIfNeeded();
       // clear cached visible index.
       this._firstVisibleIndexVal = null;
       this._lastVisibleIndexVal = null;
     },
 
     /**
      * Reset the physical average and the average count.
      */
     _resetAverage: function() {
       this._physicalAverage = 0;
       this._physicalAverageCount = 0;
     },
 
     /**
      * A handler for the `iron-resize` event triggered by `IronResizableBehavior`
      * when the element is resized.
      */
     _resizeHandler: function() {
-      // iOS fires the resize event when the address bar slides up
-      var delta = Math.abs(this._viewportHeight - this._scrollTargetHeight);
-      if (IOS && delta > 0 && delta < 100) {
-        return;
-      }
-      // In Desktop Safari 9.0.3, if the scroll bars are always shown,
-      // changing the scroll position from a resize handler would result in
-      // the scroll position being reset. Waiting 1ms fixes the issue.
-      Polymer.dom.addDebouncer(this.debounce('_debounceTemplate', function() {
+      this._debounceTemplate(function() {
+        // Skip the resize event on touch devices when the address bar slides up.
+        var delta = Math.abs(this._viewportHeight - this._scrollTargetHeight);
         this.updateViewportBoundaries();
-        this._render();
+        if (('ontouchstart' in window || navigator.maxTouchPoints > 0) && delta > 0 && delta < 100) {
+          return;
+        }
         if (this._isVisible) {
+          // Reinstall the scroll event listener.
           this.toggleScrollListener(true);
-          if (this._physicalCount > 0) {
-            this._resetAverage();
-            this.scrollToIndex(this.firstVisibleIndex);
-          }
+          this._resetAverage();
+          this._render();
         } else {
+          // Uninstall the scroll event listener.
           this.toggleScrollListener(false);
         }
-      }.bind(this), 1));
+      }.bind(this));
     },
 
     _getModelFromItem: function(item) {
       var key = this._collection.getKey(item);
       var pidx = this._physicalIndexForKey[key];
 
       if (pidx != null) {
         return this._physicalItems[pidx]._templateInstance;
       }
       return null;
@@ skipping 106 matching lines @@
     /**
      * Select an item from an event object.
      */
     _selectionHandler: function(e) {
       var model = this.modelForElement(e.target);
       if (!model) {
         return;
       }
       var modelTabIndex, activeElTabIndex;
       var target = Polymer.dom(e).path[0];
-      var activeEl = Polymer.dom(this.domHost ? this.domHost.root : document).activeElement;
+      var itemsHost = this._itemsParent.node.domHost;
+      var activeEl = Polymer.dom(itemsHost ? itemsHost.root : document).activeElement;
       var physicalItem = this._physicalItems[this._getPhysicalIndex(model[this.indexAs])];
       // Safari does not focus certain form controls via mouse
       // https://bugs.webkit.org/show_bug.cgi?id=118043
       if (target.localName === 'input' ||
           target.localName === 'button' ||
           target.localName === 'select') {
         return;
       }
       // Set a temporary tabindex
       modelTabIndex = model.tabIndex;
@@ skipping 92 matching lines @@
       }
       // restore the tab index
       model.tabIndex = 0;
       // focus the focusable element
       this._focusedIndex = idx;
       focusable && focusable.focus();
     },
 
     _removeFocusedItem: function() {
       if (this._offscreenFocusedItem) {
-        Polymer.dom(this).removeChild(this._offscreenFocusedItem);
+        this._itemsParent.removeChild(this._offscreenFocusedItem);
       }
       this._offscreenFocusedItem = null;
       this._focusBackfillItem = null;
       this._focusedItem = null;
       this._focusedIndex = -1;
     },
 
     _createFocusBackfillItem: function() {
       var fidx = this._focusedIndex;
       var pidx = this._getPhysicalIndex(fidx);
 
       if (this._offscreenFocusedItem || pidx == null || fidx < 0) {
         return;
       }
       if (!this._focusBackfillItem) {
         // Create a physical item.
         var stampedTemplate = this.stamp(null);
         this._focusBackfillItem = stampedTemplate.root.querySelector('*');
-        Polymer.dom(this).appendChild(stampedTemplate.root);
+        this._itemsParent.appendChild(stampedTemplate.root);
       }
       // Set the offcreen focused physical item.
       this._offscreenFocusedItem = this._physicalItems[pidx];
       this._offscreenFocusedItem._templateInstance.tabIndex = 0;
       this._physicalItems[pidx] = this._focusBackfillItem;
       // Hide the focused physical.
       this.translate3d(0, HIDDEN_Y, 0, this._offscreenFocusedItem);
     },
 
     _restoreFocusedItem: function() {
       var pidx, fidx = this._focusedIndex;
 
       if (!this._offscreenFocusedItem || this._focusedIndex < 0) {
         return;
       }
       // Assign models to the focused index.
       this._assignModels();
       // Get the new physical index for the focused index.
       pidx = this._getPhysicalIndex(fidx);
 
-      if (pidx != null) {
+      var onScreenItem = this._physicalItems[pidx];
+      if (!onScreenItem) {
+        return;
+      }
+      var onScreenInstance = onScreenItem._templateInstance;
+      var offScreenInstance = this._offscreenFocusedItem._templateInstance;
+      // Restores the physical item only when it has the same model 
+      // as the offscreen one. Use key for comparison since users can set
+      // a new item via set('items.idx').
+      if (onScreenInstance.__key__ === offScreenInstance.__key__) {
         // Flip the focus backfill.
-        this._focusBackfillItem = this._physicalItems[pidx];
-        this._focusBackfillItem._templateInstance.tabIndex = -1;
+        this._focusBackfillItem = onScreenItem;
+        onScreenInstance.tabIndex = -1;
         // Restore the focused physical item.
         this._physicalItems[pidx] = this._offscreenFocusedItem;
-        // Reset the offscreen focused item.
-        this._offscreenFocusedItem = null;
         // Hide the physical item that backfills.
         this.translate3d(0, HIDDEN_Y, 0, this._focusBackfillItem);
+      } else {
+        this._focusBackfillItem = null;
       }
+      this._offscreenFocusedItem = null;
     },
 
     _didFocus: function(e) {
       var targetModel = this.modelForElement(e.target);
       var focusedModel = this._focusedItem ? this._focusedItem._templateInstance : null;
       var hasOffscreenFocusedItem = this._offscreenFocusedItem !== null;
       var fidx = this._focusedIndex;
 
       if (!targetModel || !focusedModel) {
         return;
@@ skipping 28 matching lines @@
       this._focusPhysicalItem(this._focusedIndex + 1);
     },
 
     _didEnter: function(e) {
       this._focusPhysicalItem(this._focusedIndex);
       this._selectionHandler(e.detail.keyboardEvent);
     }
   });
 
 })();