Add a method to preselect a list item.

[robjepopje]

Description

At the moment an item can be ‘preselected’ by keyboard navigation when the iron-list has the focus. This is done by giving the preselected item the focus. By pressing ‘enter’ the selected state of the preselected item will be toggled.

(See polymer example: https://elements.polymer-project.org/bower_components/iron-list/demo/selection.html.)

When using the iron-list as part of an autocomplete multi-select combobox the focus is kept on the search input field and so setting the focus can not be used to preselect an item.

((Just) an example can be found at http://www.jqueryscript.net/demo/Multi-Select-Autocomplete-Dropdown-Plugin-For-jQuery-MSelectDialogBox/, (with Multiselect = true, autoComplete = true)) ((Example icw accessibility/aria-activedescendant) http://oaa-accessibility.org/example/11/)

A missing feature is a method to preselect/activate a list item (without giving the list item the real focus.

This feature should probably also be added to Polymer.IronMultiSelectableBehavior/IronSelectableBehavior.

[blasten]

You could also implement your own key down handlers for the up and down keys while the input is focused and have a state e.g. focusedIndex that you can decrease or increase based on the pressed key. When a up/down key is pressed, you update that state and then call this.$.list.scrollToIndex(this.focusedIndex); if enter is pressed you can activate that element: this.$.list.selectItem(this.$.list.items[this.focusedIndex]);

Lastly in the iron-list template, you can update the background color of the item as focusedIndex changes:

<iron-list id="list">
  <template>
     <div style$="background-color:[[_computeBackgroundColor(index, focusedIndex, selected)]];">
        [[item.name]]
    </div>
  </template>
</iron-list>

Lastly,

_computeBackgroundColor(index, focusedIndex, selected) {
  if (selected) return 'DodgerBlue';
  if (index == focusedIndex) return 'GhostWhite';
  return 'white';
}

[robjepopje]

Yes, it is possible to implement it this way.

However I think maintaining the focusedItem state can better be done by the iron-list. In fact this is already done on keyboard navigation, where the ‘active list-item’ state is handled internally by _focusedIndex. By adding focusItem (calling _focusPhysicalItem) and activateItem/preselectItem (calling _focusPhysicalItem but not setting the real focus) I think it would be easier to extend keyboard navigation (for example implementing an auto-complete combobox or adding pageUp/pageDown navigation).