Strange focusing and collapse Issues

[barnomics]

Description

iron-list focusing and collapsing behaves strangely. It's rather difficult to explain what's going on so I'll just list the steps to reproduce.

Steps to reproduce

1. Open: https://elements.polymer-project.org/bower_components/iron-list/demo/collapse.html
2. Open Chrome's console log.
3. Tap any item. It expands and receives focus.
4. Scroll down a bunch in the list (preferably dozen's of items down)
5. Now click into the console log to force the document and item to lose focus.
6. Tap a new item that is way down in the list.

   Expected outcome

7. I expect the new item I "tap" on to receive focus and expand.

   Actual outcome

8. The thing I "tap" on does not receive focus. Instead, iron-list scrolls to the original item that was expanded and gives it focus.

   Browsers Affected

   • [X] Chrome
   • [ ] Firefox
   • [ ] Safari 9
   • [ ] Safari 8
   • [ ] Safari 7
   • [ ] Edge
   • [ ] IE 11
   • [ ] IE 10

[blasten]

@barnomics This seems odd, but I'm curious to see the use case. The underlaying issue is that when you focus the window back, a focus event is triggered on the DOM node that was previously focused. In iron-list, that means that the item should be brought into view whenever the item received focus regardless of where the focus event came from. The click event happens after the focus event, so that's why you see this issue. A workaround:

  this.listen(window, 'focus', '_focus');

and then:

_focus: function() {
  var focusedItem = this.$.list._focusedItem;
  this.$.list._focusedItem = null;
  this.async(function() {
    this.$.list._focusedItem = focusedItem;
  }, 1);
},

Iron-list doesn't add listeners or behavior to window or any node from outside the list itself, so it's very unlikely that this code would be landed directly, but it could expose a public API e.g. renaming _focusedItem -> focusedItem to achieve this behavior.

[barnomics]

I also have a semi-related issue to focusing. My iron-list the elements are expandable. Lets say its a list of 100 items.

1. I open an item (5) at the top of the list
2. I scroll down a bunch to open another item (50).
3. As I tap, the "_didFocus" event handler fires. Within my "viewport" if the firstVisibleItem is not fully within the visible area (lets say the top half of item 47 is cut off in the view), item 47 will scrollIntoView ... moving the whole list down a number of pixels.
4. Because of this jank, my original tap event on item 50 never happens because the target has moved from its original position

[blasten]

@barnomics I can only reproduce the issue if I move focus outside the window (e.g. I focus the address bar or dev tool as you mentioned in the initial issue) using this demo https://elements.polymer-project.org/bower_components/iron-list/demo/collapse.html. Do you have a jsbin that reproduces the issue?