Fix autoscroll on select

maiconfz · Jun 5, 2020 · 5c9300d · 5c9300d
1 parent 153aacc
commit 5c9300d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "i9multiselect",
   "description": "A tool to emulate check-boxes on html select multiple element, using jquery and fontawesome",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "keywords": [
     "jquery, fontawesome, checkbox, multiselect, html"
   ],

diff --git a/src/i9multiselect.js b/src/i9multiselect.js
@@ -14,7 +14,7 @@
             this.$select
                 .mousedown((event) => { event.preventDefault(); })
                 .mouseup((event) => { event.preventDefault(); })
-                .focus((event) => {event.preventDefault(); })
+                .focus((event) => { event.preventDefault(); })
                 .click((event) => {
                     event.preventDefault();
                     self.$select.focus();
@@ -46,6 +46,8 @@
         }
 
         toggleOptionSelect($option) {
+            const selectScrollTop = this.$select.scrollTop();
+
             if ($option.prop('selected') || $option.attr('selected') === 'selected') {
                 $option.prop('selected', false).attr('selected', null);
             } else {
@@ -54,6 +56,9 @@
 
             this.$options.filter('option[data-focus="true"]').data('focus', null).attr('data-focus', null).removeClass('focus');
             $option.data('focus', true).attr('data-focus', true).addClass('focus');
+
+            setTimeout(() => { this.$select.scrollTop(selectScrollTop) }, 0);
+
             return this;
         };
 
@@ -78,11 +83,11 @@
             }
 
             $optionToFocus.data('focus', true).attr('data-focus', true).addClass('focus');
-            
+
             let ignoreSpace = this.$select.position().top + parseInt(this.$select.css('border-top-width')) + parseInt(this.$select.css('padding-top'));
             let firstOptionRealTopPosition = this.$options.first().position().top - ignoreSpace;
             let optionToFocusRealTopPosition = $optionToFocus.position().top - ignoreSpace;
-            let scrollTopPosition =  optionToFocusRealTopPosition + Math.abs(firstOptionRealTopPosition);
+            let scrollTopPosition = optionToFocusRealTopPosition + Math.abs(firstOptionRealTopPosition);
             this.$select.scrollTop(scrollTopPosition);
             return this;
         };