Previous and Next items selection

[laurentmuller]

When items are grouped by category, a header and a separator is added with each category. User can select items with arrow keys. It will be nice if the header and separator are skipped when using arrows navigation.

The function to update are prev and next. I have updated the code for this as follow:

    next: function (event) {
      var active = this.$menu.find('.active').removeClass('active');
      var next = active.nextAll('li:not(.dropdown-header):not(.divider):first'); 

      if (!next.length) {
        next = this.$menu.find('li:not(.dropdown-header):not(.divider):first');
      }

      next.addClass('active');      
      // added for screen reader
      var newVal = this.updater(next.data('value'));
      this.$element.val(this.displayText(newVal) || newVal);
    },

    prev: function (event) {
      var active = this.$menu.find('.active').removeClass('active');
      var prev = active.prevAll(':not(.divider):not(.dropdown-header):first');

      if (!prev.length) {          
        prev = this.$menu.find('li:not(.dropdown-header):not(.divider):last');
      }

      prev.addClass('active');
      // added for screen reader
      var newVal = this.updater(prev.data('value'));
      this.$element.val(this.displayText(newVal) || newVal);
    },