examples/dropdown/dist/index.js
function addEventKeyNavigation(element, items, itemSelectCallback) {
  var itemSwitchCallback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;


  var currentItemIndex = null;
  for (var k = 0; k < items.length; k++) {
    if (items[k].hasAttribute('aria-selected')) {
      currentItemIndex = k;
      break;
    }
  }

  /*let currentActiveItems = [];
  for (let k = 0; k < items.length; k++) {
    if (items[k].classList.contains(activeClass)) {
      currentActiveItems.push(items[k]);
    }
  }*/

  var _itemAdd = function _itemAdd() {
    items[currentItemIndex].focus();
    //items[currentItemIndex].classList.add(activeClass);
    //items[currentItemIndex].setAttribute('aria-selected', 'true');
    /*if (!BunnyElement.isInViewport(items[currentItemIndex])) {
      BunnyElement.scrollTo(items[currentItemIndex], 400, -200);
    }*/
    //items[currentItemIndex].scrollIntoView(false);
    if (itemSwitchCallback !== null) {
      itemSwitchCallback(items[currentItemIndex]);
    }
  };

  var _itemRemove = function _itemRemove() {
    //items[currentItemIndex].classList.remove(activeClass);
    //items[currentItemIndex].removeAttribute('aria-selected');
  };

  var handler = function handler(e) {
    var c = e.keyCode;

    var maxItemIndex = items.length - 1;

    if (c === KEY_ENTER || c === KEY_SPACE) {
      e.preventDefault();
      if (currentItemIndex !== null) {
        items[currentItemIndex].click();
        itemSelectCallback(items[currentItemIndex]);
      } else {
        itemSelectCallback(null);
      }
    } else if (c === KEY_ESCAPE) {
      e.preventDefault();
      /*for (let k = 0; k < items.length; k++) {
        if (currentActiveItems.indexOf(items[k]) === -1) {
          // remove active state
          items[k].classList.remove(activeClass);
          items[k].removeAttribute('aria-selected');
        } else {
          // set active state
          items[k].classList.add(activeClass);
          items[k].setAttribute('aria-selected', 'true');
        }
      }*/
      itemSelectCallback(false);
    } else if (c === KEY_ARROW_UP || c === KEY_ARROW_LEFT) {
      e.preventDefault();
      if (currentItemIndex !== null && currentItemIndex > 0) {
        _itemRemove();
        currentItemIndex -= 1;
        _itemAdd();
      }
    } else if (c === KEY_ARROW_DOWN || c === KEY_ARROW_RIGHT) {
      e.preventDefault();
      if (currentItemIndex === null) {
        currentItemIndex = 0;
        _itemAdd();
      } else if (currentItemIndex < maxItemIndex) {
        _itemRemove();
        currentItemIndex += 1;
        _itemAdd();
      }
    }
  };

  if (items.length > 0) {
    element.addEventListener('keydown', handler);
  }

  return handler;
}
function addEventKeyNavigation(element, items, itemSelectCallback) {
  var itemSwitchCallback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;


  var currentItemIndex = null;
  for (var k = 0; k < items.length; k++) {
    if (items[k].hasAttribute('aria-selected')) {
      currentItemIndex = k;
      break;
    }
  }

  /*let currentActiveItems = [];
  for (let k = 0; k < items.length; k++) {
    if (items[k].classList.contains(activeClass)) {
      currentActiveItems.push(items[k]);
    }
  }*/

  var _itemAdd = function _itemAdd() {
    items[currentItemIndex].focus();
    //items[currentItemIndex].classList.add(activeClass);
    //items[currentItemIndex].setAttribute('aria-selected', 'true');
    /*if (!BunnyElement.isInViewport(items[currentItemIndex])) {
      BunnyElement.scrollTo(items[currentItemIndex], 400, -200);
    }*/
    //items[currentItemIndex].scrollIntoView(false);
    if (itemSwitchCallback !== null) {
      itemSwitchCallback(items[currentItemIndex]);
    }
  };

  var _itemRemove = function _itemRemove() {
    //items[currentItemIndex].classList.remove(activeClass);
    //items[currentItemIndex].removeAttribute('aria-selected');
  };

  var handler = function handler(e) {
    var c = e.keyCode;

    var maxItemIndex = items.length - 1;

    if (c === KEY_ENTER || c === KEY_SPACE) {
      e.preventDefault();
      if (currentItemIndex !== null) {
        items[currentItemIndex].click();
        itemSelectCallback(items[currentItemIndex]);
      } else {
        itemSelectCallback(null);
      }
    } else if (c === KEY_ESCAPE) {
      e.preventDefault();
      /*for (let k = 0; k < items.length; k++) {
        if (currentActiveItems.indexOf(items[k]) === -1) {
          // remove active state
          items[k].classList.remove(activeClass);
          items[k].removeAttribute('aria-selected');
        } else {
          // set active state
          items[k].classList.add(activeClass);
          items[k].setAttribute('aria-selected', 'true');
        }
      }*/
      itemSelectCallback(false);
    } else if (c === KEY_ARROW_UP || c === KEY_ARROW_LEFT) {
      e.preventDefault();
      if (currentItemIndex !== null && currentItemIndex > 0) {
        _itemRemove();
        currentItemIndex -= 1;
        _itemAdd();
      }
    } else if (c === KEY_ARROW_DOWN || c === KEY_ARROW_RIGHT) {
      e.preventDefault();
      if (currentItemIndex === null) {
        currentItemIndex = 0;
        _itemAdd();
      } else if (currentItemIndex < maxItemIndex) {
        _itemRemove();
        currentItemIndex += 1;
        _itemAdd();
      }
    }
  };

  if (items.length > 0) {
    element.addEventListener('keydown', handler);
  }

  return handler;
}
function addEventKeyNavigation ( element , items , itemSelectCallback ) { var itemSwitchCallback = arguments . length > 3 && arguments [ 3 ] !== undefined ? arguments [ 3 ] : null ; var currentItemIndex = null ; for ( var k = 0 ; k < items . length ; k ++ ) { if ( items [ k ] . hasAttribute ( 'aria-selected' ) ) { currentItemIndex = k ; break ; } } /*let currentActiveItems = [];
  for (let k = 0; k < items.length; k++) {
    if (items[k].classList.contains(activeClass)) {
      currentActiveItems.push(items[k]);
    }
  }*/ var _itemAdd = function _itemAdd ( ) { items [ currentItemIndex ] . focus ( ) ; //items[currentItemIndex].classList.add(activeClass); //items[currentItemIndex].setAttribute('aria-selected', 'true'); /*if (!BunnyElement.isInViewport(items[currentItemIndex])) {
      BunnyElement.scrollTo(items[currentItemIndex], 400, -200);
    }*/ //items[currentItemIndex].scrollIntoView(false); if ( itemSwitchCallback !== null ) { itemSwitchCallback ( items [ currentItemIndex ] ) ; } } ; var _itemRemove = function _itemRemove ( ) { //items[currentItemIndex].classList.remove(activeClass); //items[currentItemIndex].removeAttribute('aria-selected'); } ; var handler = function handler ( e ) { var c = e . keyCode ; var maxItemIndex = items . length - 1 ; if ( c === KEY_ENTER || c === KEY_SPACE ) { e . preventDefault ( ) ; if ( currentItemIndex !== null ) { items [ currentItemIndex ] . click ( ) ; itemSelectCallback ( items [ currentItemIndex ] ) ; } else { itemSelectCallback ( null ) ; } } else if ( c === KEY_ESCAPE ) { e . preventDefault ( ) ; /*for (let k = 0; k < items.length; k++) {
        if (currentActiveItems.indexOf(items[k]) === -1) {
          // remove active state
          items[k].classList.remove(activeClass);
          items[k].removeAttribute('aria-selected');
        } else {
          // set active state
          items[k].classList.add(activeClass);
          items[k].setAttribute('aria-selected', 'true');
        }
      }*/ itemSelectCallback ( false ) ; } else if ( c === KEY_ARROW_UP || c === KEY_ARROW_LEFT ) { e . preventDefault ( ) ; if ( currentItemIndex !== null && currentItemIndex > 0 ) { _itemRemove ( ) ; currentItemIndex -= 1 ; _itemAdd ( ) ; } } else if ( c === KEY_ARROW_DOWN || c === KEY_ARROW_RIGHT ) { e . preventDefault ( ) ; if ( currentItemIndex === null ) { currentItemIndex = 0 ; _itemAdd ( ) ; } else if ( currentItemIndex < maxItemIndex ) { _itemRemove ( ) ; currentItemIndex += 1 ; _itemAdd ( ) ; } } } ; if ( items . length > 0 ) { element . addEventListener ( 'keydown' , handler ) ; } return handler ; }
Adds up, down, esc, enter keypress event on 'element' to traverse though 'items'

@param {HTMLElement} element
@param {HTMLCollection|NodeList} items
@param {function} itemSelectCallback
callback(null) if Enter was pressed and no item was selected (for example custom value entered)
callback(false) if Esc was pressed (canceled)
callback({HTMLElement} item) - selected item on Enter
@param {function} itemSwitchCallback = null
callback({HTMLElement} item) - new item on arrow up/down

@returns {function(*)}
Adds up down esc enter keypress event on element to traverse though items