fix(keyboardSupport): Prevent losing focus when slider is rerendered (#415)

Fix #411

Author: ValentinH

dist/rzslider.js

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v5.5.0 - 
  (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-09-06 */
+ 2016-09-22 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -304,6 +304,11 @@
        */
       this.cmbLabelShown = false;
 
+      /**
+       * Internal variable to keep track of the focus element
+       */
+      this.currentFocusElement = null;
+
       // Slider DOM elements wrapped in jqLite
       this.fullBar = null; // The whole slider bar
       this.selBar = null; // Highlight between two handles
@@ -413,6 +418,7 @@
         this.scope.$on('$destroy', function() {
           self.unbindEvents();
           angular.element($window).off('resize', calcDimFn);
+          self.currentFocusElement = null;
         });
       },
 
@@ -577,7 +583,7 @@
         else {
           this.customTrFn = function(modelValue) {
             if (this.options.bindIndexForStepsArray)
-              return this.getStepValue(modelValue)
+              return this.getStepValue(modelValue);
             return modelValue;
           };
         }
@@ -605,6 +611,14 @@
         this.manageEventsBindings();
         this.setDisabledState();
         this.calcViewDimensions();
+        this.refocusPointerIfNeeded();
+      },
+
+      refocusPointerIfNeeded: function() {
+        if (this.currentFocusElement) {
+          this.onPointerFocus(this.currentFocusElement.pointer, this.currentFocusElement.ref);
+          this.focusElement(this.currentFocusElement.pointer)
+        }
       },
 
       /**
@@ -1070,7 +1084,7 @@
           };
         }
 
-        if(this.options.autoHideLimitLabels){
+        if (this.options.autoHideLimitLabels) {
           this.shFloorCeil();
         }
       },
@@ -1092,7 +1106,7 @@
             backgroundColor: pointercolor
           };
         }
-        if(this.options.autoHideLimitLabels){
+        if (this.options.autoHideLimitLabels) {
           this.shFloorCeil();
         }
 
@@ -1695,6 +1709,11 @@
         pointer.on('keyup', angular.bind(this, this.onKeyUp));
         this.firstKeyDown = true;
         pointer.addClass('rz-active');
+
+        this.currentFocusElement = {
+          pointer: pointer,
+          ref: ref
+        };
       },
 
       onKeyUp: function() {
@@ -1707,6 +1726,7 @@
         pointer.off('keyup');
         this.tracking = '';
         pointer.removeClass('rz-active');
+        this.currentFocusElement = null
       },
 
       /**
@@ -1925,7 +1945,7 @@
           newMinValue = this.options.minLimit;
           newMaxValue = newMinValue + this.dragging.difference;
         }
-        if (this.options.maxLimit != null && newMaxValue > this.options.maxLimit){
+        if (this.options.maxLimit != null && newMaxValue > this.options.maxLimit) {
           newMaxValue = this.options.maxLimit;
           newMinValue = newMaxValue - this.dragging.difference;
         }

dist/rzslider.min.js

@@ -308,6 +308,11 @@
        */
       this.cmbLabelShown = false;
 
+      /**
+       * Internal variable to keep track of the focus element
+       */
+      this.currentFocusElement = null;
+
       // Slider DOM elements wrapped in jqLite
       this.fullBar = null; // The whole slider bar
       this.selBar = null; // Highlight between two handles
@@ -417,6 +422,7 @@
         this.scope.$on('$destroy', function() {
           self.unbindEvents();
           angular.element($window).off('resize', calcDimFn);
+          self.currentFocusElement = null;
         });
       },
 
@@ -581,7 +587,7 @@
         else {
           this.customTrFn = function(modelValue) {
             if (this.options.bindIndexForStepsArray)
-              return this.getStepValue(modelValue)
+              return this.getStepValue(modelValue);
             return modelValue;
           };
         }
@@ -609,6 +615,14 @@
         this.manageEventsBindings();
         this.setDisabledState();
         this.calcViewDimensions();
+        this.refocusPointerIfNeeded();
+      },
+
+      refocusPointerIfNeeded: function() {
+        if (this.currentFocusElement) {
+          this.onPointerFocus(this.currentFocusElement.pointer, this.currentFocusElement.ref);
+          this.focusElement(this.currentFocusElement.pointer)
+        }
       },
 
       /**
@@ -1074,7 +1088,7 @@
           };
         }
 
-        if(this.options.autoHideLimitLabels){
+        if (this.options.autoHideLimitLabels) {
           this.shFloorCeil();
         }
       },
@@ -1096,7 +1110,7 @@
             backgroundColor: pointercolor
           };
         }
-        if(this.options.autoHideLimitLabels){
+        if (this.options.autoHideLimitLabels) {
           this.shFloorCeil();
         }
 
@@ -1699,6 +1713,11 @@
         pointer.on('keyup', angular.bind(this, this.onKeyUp));
         this.firstKeyDown = true;
         pointer.addClass('rz-active');
+
+        this.currentFocusElement = {
+          pointer: pointer,
+          ref: ref
+        };
       },
 
       onKeyUp: function() {
@@ -1711,6 +1730,7 @@
         pointer.off('keyup');
         this.tracking = '';
         pointer.removeClass('rz-active');
+        this.currentFocusElement = null
       },
 
       /**
@@ -1929,7 +1949,7 @@
           newMinValue = this.options.minLimit;
           newMaxValue = newMinValue + this.dragging.difference;
         }
-        if (this.options.maxLimit != null && newMaxValue > this.options.maxLimit){
+        if (this.options.maxLimit != null && newMaxValue > this.options.maxLimit) {
           newMaxValue = this.options.maxLimit;
           newMinValue = newMaxValue - this.dragging.difference;
         }

src/rzslider.js

@@ -241,6 +241,26 @@
       helper.pressKeydown(helper.slider.minH, 'RIGHT');
       expect(helper.scope.slider.value).to.equal(90);
     });
+
+    it('should refocus the slider after a reset if needed and still handle keyboard', function() {
+      var sliderConf = {
+        value: 90,
+        options: {
+          floor: 0,
+          ceil: 100,
+          step: 1
+        }
+      };
+      helper.createSlider(sliderConf);
+      //try to move minH right
+      helper.slider.minH.triggerHandler('focus');
+
+      helper.slider.resetSlider();
+
+      helper.pressKeydown(helper.slider.minH, 'RIGHT');
+      expect(document.activeElement).to.equal(helper.slider.minH[0]);
+      expect(helper.scope.slider.value).to.equal(91);
+    });
   });
 
   describe('Right to left Keyboard controls - specific tests', function() {