From 34fa39fe1e557d724b54183c69d5a8c952f57264 Mon Sep 17 00:00:00 2001 From: Jesse Date: Wed, 28 Nov 2018 17:22:53 -0500 Subject: [PATCH] cherry pick from 31b65ddaeb9cfe49c99968c79952b6ce42ef1f97, see phetsims/coulombs-law#90 --- js/accessibility/AccessibleSlider.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/js/accessibility/AccessibleSlider.js b/js/accessibility/AccessibleSlider.js index 938f7301..f51ec562 100644 --- a/js/accessibility/AccessibleSlider.js +++ b/js/accessibility/AccessibleSlider.js @@ -174,6 +174,11 @@ define( function( require ) { this.increasedEmitter = new Emitter(); this.decreasedEmitter = new Emitter(); + // @private (a11y) - some browsers will receive `input` events when the user tabs away from the slider or + // on some key presses - if we receive a keydown event, we do not want the value to change twice, so we + // block input event after handling the keydown event + this.blockInput = false; + // @private - entries like { {number}: {boolean} }, key is range key code, value is whether it is down this.rangeKeysDown = {}; @@ -345,6 +350,10 @@ define( function( require ) { var code = event.keyCode; this._shiftKey = event.shiftKey; + // if we receive a keydown event, we shouldn't handle any input events (which should only be provided + // directly by an assistive device) + this.blockInput = true; + if ( this._enabledProperty.get() ) { // Prevent default so browser doesn't change input value automatically @@ -458,7 +467,7 @@ define( function( require ) { * @param {DOMEvent} event */ handleChange: function( event ) { - if ( this._enabledProperty.get() ) { + if ( this._enabledProperty.get() && !this.blockInput ) { // don't handle changes if the element does not have focus - the browser may be trying to 'commit' a new // value on blur that is evenly divisible by the step size, but we don't want that for AccessibleSlider