Use pull request #11108 from DanielRuf/fix/slider-input-change-event-enter-11096...

edf6f79ff fix: listen for the enter key and trigger a change to emulate change event in IE
0804c9002 fix: deduplicate the code for the event listeners
aefb26be4 fix: properly indent lines

Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>

diff --git a/js/foundation.slider.js b/js/foundation.slider.js
index 4a02975b2d733b6024d416f947c33cd0a89d2400..e7d4e18705f1fc575e34e32c8d8332d9eb8785f0 100644 (file)
--- a/js/foundation.slider.js
+++ b/js/foundation.slider.js
@@ -460,11 +460,20 @@ class Slider extends Plugin {
         curHandle,
         timer;
 
-      this.inputs.off('change.zf.slider').on('change.zf.slider', function(e) {
-        var idx = _this.inputs.index($(this));
+      const handleChangeEvent = function(e) {
+        const idx = _this.inputs.index($(this));
         _this._handleEvent(e, _this.handles.eq(idx), $(this).val());
+      };
+
+      // IE only triggers the change event when the input loses focus which strictly follows the HTML specification
+      // listen for the enter key and trigger a change
+      // @see https://html.spec.whatwg.org/multipage/input.html#common-input-element-events
+      this.inputs.off('keyup.zf.slider').on('keyup.zf.slider', function (e) {
+        if(e.keyCode == 13) handleChangeEvent.call(this, e);
       });
 
+      this.inputs.off('change.zf.slider').on('change.zf.slider', handleChangeEvent);
+
       if (this.options.clickSelect) {
         this.$element.off('click.zf.slider').on('click.zf.slider', function(e) {
           if (_this.$element.data('dragging')) { return false; }