Filter Code Refactor & Fix Scroll on Focus Issues (#761)

* Minor Code Refactor

1.  Make filterRules a local variable.
2.  Remove the unneeded multiselect() call to get the instance.
3.  Save class names in variables that can be obfuscated away.
4.  Decrease unneeded jQuery function calls.

* Fix scroll on focus issues

Fixes #195
Fixes #551

This fixes undesired scrolling issues caused by focusing an element that is only partially visible.

Author: SteveTheTechie

src/jquery.multiselect.filter.js

@@ -18,16 +18,23 @@
 
   // "{{term}}" is a placeholder below for where the search term
   // would be inserted in the resulting regular expression.
-  filterRules = {
-      'contains': '{{term}}',
-      'beginsWith':  '^{{term}}',
-      'endsWith':  '{{term}}$',
-      'exactMatch':  '^{{term}}$',
-      'containsNumber':  '\d',
-      'isNumeric':  '^\d+$',
-      'isNonNumeric':  '^\D+$'
+  var filterRules = {
+      contains: '{{term}}',
+      beginsWith:  '^{{term}}',
+      endsWith:  '{{term}}$',
+      exactMatch:  '^{{term}}$',
+      containsNumber:  '\d',
+      isNumeric:  '^\d+$',
+      isNonNumeric:  '^\D+$'
   };
 
+  var headerSelector = '.ui-multiselect-header';
+  var hasFilterClass = 'ui-multiselect-hasfilter';
+  var filterClass = 'ui-multiselect-filter';
+  var optgroupClass = 'ui-multiselect-optgroup';
+  var groupLabelClass = 'ui-multiselect-grouplabel';
+  var hiddenClass = 'ui-multiselect-excluded';
+
   //Courtesy of underscore.js
   function debounce(func, wait, immediate) {
     var timeout;
@@ -75,10 +82,10 @@
       var $element = this.element;
 
       // get the multiselect instance -- instance() method no longer supported -- use data()
-      this.instance = $element.multiselect().data('ech-multiselect');
+      this.instance = $element.data('ech-multiselect');
 
       // store header; add filter class so the close/check all/uncheck all links can be positioned correctly
-      this.$header = this.instance.$menu.find('.ui-multiselect-header').addClass('ui-multiselect-hasfilter');
+      this.$header = this.instance.$menu.find(headerSelector).addClass(hasFilterClass);
 
       // wrapper $element
       this.$input = $(document.createElement('input'))
@@ -131,7 +138,7 @@
 
       var $label = $(document.createElement('label')).text(opts.label).append(this.$input);
       this.$wrapper = $(document.createElement('div'))
-                                 .addClass(' ui-multiselect-filter')
+                                 .addClass(filterClass)
                                  .append($label)
                                  .prependTo(this.$header);
 
@@ -170,36 +177,33 @@
       var searchGroups = !!this.options.searchGroups;
       var $checkboxes = this.instance.$checkboxes;
       var cache = this.cache;   // Cached text() object
-      var optgroupClass = "ui-multiselect-optgroup";
-      var hiddenClass = 'ui-multiselect-excluded';
 
       this.$rows.toggleClass(hiddenClass, !!term);
       var filteredInputs = $checkboxes.children().map(function(x) {
-        var $this = $(this);
-        var $groupItems = $this;
+        var elem = this;
+        var $groupItems = $(elem);
         var groupShown = false;
 
          // Account for optgroups
          // If we are searching in option group labels and we match an optgroup label,
          // then show all its children and return all its inputs also.
-        if ($this.hasClass(optgroupClass)) {
-          var $groupItems = $this.find('li');
+        if (elem.classList.contains(optgroupClass)) {
+          var $groupItems = $groupItems.find('li');
           if (searchGroups && regex.test( cache[x] ) ) {
-             $this.removeClass(hiddenClass);
+             elem.classList.remove(hiddenClass);
              $groupItems.removeClass(hiddenClass);
              return $groupItems.find('input').get();
           }
         }
 
         return $groupItems.map(function(y) {
-          var $listItem = $(this);
           if ( regex.test( cache[x + '.' + y] ) ) {
             // Show the opt group heading if needed
             if (!groupShown) {
-               $this.removeClass(hiddenClass);
+               elem.classList.remove(hiddenClass);
                groupShown = true;
             }
-            $listItem.removeClass(hiddenClass);
+            this.classList.remove(hiddenClass);
             return this.getElementsByTagName('input')[0];
           }
           return null;
@@ -228,13 +232,13 @@
       this.instance.$checkboxes.children().each(function(x) {
          var $element = $(this);
          // Account for optgroups
-         if ($element.hasClass('ui-multiselect-optgroup')) {
+         if (this.classList.contains(optgroupClass)) {
             // Single number keys are the option labels
-            cache[x] = $element.children('a').text();
+            cache[x] = this.getElementsByClassName(groupLabelClass)[0].textContent;
             $element = $element.find('li');
          }
          $element.each(function(y) {
-            cache[x + '.' + y] = $(this).text();
+            cache[x + '.' + y] = this.textContent;
          });
       });
       this.cache = cache;
@@ -257,7 +261,7 @@
     destroy: function() {
       $.Widget.prototype.destroy.call(this);
       this.$input.val('').trigger("keyup").off('keydown input search');
-      this.instance.$menu.find('.ui-multiselect-header').removeClass('ui-multiselect-hasfilter');
+      this.instance.$menu.find(headerSelector).removeClass(hasFilterClass);
       this.$wrapper.remove();
     }
   });

src/jquery.multiselect.js

@@ -731,8 +731,19 @@
       // option label
       .on('mouseenter.multiselect', 'label', function() {
         if (!this.classList.contains('ui-state-disabled')) {
+          var checkboxes = self.$checkboxes[0];
+          var scrollLeft = checkboxes.scrollLeft;
+          var scrollTop = checkboxes.scrollTop;
+          var scrollX = window.scrollX;
+          var scrollY = window.scrollY;
+
           self.$labels.removeClass('ui-state-hover');
           $(this).addClass('ui-state-hover').find('input').focus();
+
+          // Restore scroll positions if altered by setting input focus
+          checkboxes.scrollLeft = scrollLeft;
+          checkboxes.scrollTop = scrollTop;
+          window.scrollTo(scrollX, scrollY);
         }
       })
       // Keyboard navigation of the menu
@@ -1363,6 +1374,8 @@
       var speed = this.speed;
       var options = this.options;
       var effect = options.openEffect;
+      var scrollX = window.scrollX;
+      var scrollY = window.scrollY;
 
       // figure out opening effects/speeds
       if (effect && effect.constructor == Array) {
@@ -1401,6 +1414,9 @@
         $header.find('a').first().trigger('focus');
       }
 
+      // Restore window scroll position if altered by setting element focus
+      window.scrollTo(scrollX, scrollY);
+
       $button.addClass('ui-state-active');
       this._isOpen = true;
       this._trigger('open');
@@ -1675,7 +1691,7 @@
      * @returns {array} List of option groups that are collapsed
      */
     getCollapsed: function() {
-       return this.$checkboxes.find('.ui-multiselect-optgroup');
+       return this.$checkboxes.find('.ui-multiselect-collapsed');
     },
 
     /**