From ed8f8761aa271ccdf056f50bc5e1bc3fe657c42c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 26 Feb 2020 18:22:37 -0400 Subject: [PATCH 1/5] fix(b-form-spinbutton): prevent double increment/decrement on mobile (fixes #4838) --- src/components/form-spinbutton/form-spinbutton.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/form-spinbutton/form-spinbutton.js b/src/components/form-spinbutton/form-spinbutton.js index ec15b92f366..8d5ab0c66bd 100644 --- a/src/components/form-spinbutton/form-spinbutton.js +++ b/src/components/form-spinbutton/form-spinbutton.js @@ -237,6 +237,7 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({ this.$_autoDelayTimer = null this.$_autoRepeatTimer = null this.$_keyIsDown = false + this.$_mouseIsDown = false }, beforeDestroy() { this.clearRepeat() @@ -366,8 +367,6 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({ return } this.resetTimers() - // Enable body mouseup event handler - this.setMouseup(true) // Step the counter initially stepper(1) const threshold = this.computedThreshold @@ -408,6 +407,7 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({ eventOnOff(on, document.body, 'mouseup', this.onMouseup, EVENT_OPTIONS_PASSIVE) eventOnOff(on, document.body, 'touchend', this.onMouseup, EVENT_OPTIONS_PASSIVE) } catch {} + this.$_mouseIsDown = on }, resetTimers() { clearTimeout(this.$_autoDelayTimer) @@ -417,6 +417,7 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({ this.resetTimers() this.setMouseup(false) this.$_keyIsDown = false + this.$_mouseIsDown = false } }, render(h) { @@ -437,8 +438,9 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({ props: { scale: this.hasFocus ? 1.5 : 1.25 }, attrs: { 'aria-hidden': 'true' } }) - const handler = evt => /* istanbul ignore next: until tests written */ { - if (!isDisabled && !isReadonly) { + const handler = evt => { + if (!isDisabled && !isReadonly && !this.$_mouseIsDown) { + this.setMouseup(true) this.handleStepRepeat(evt, stepper) } } From c4b8ea0e0671aa5b5426d99311b5a9a3b412652c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 26 Feb 2020 18:32:15 -0400 Subject: [PATCH 2/5] Update form-spinbutton.js --- src/components/form-spinbutton/form-spinbutton.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/form-spinbutton/form-spinbutton.js b/src/components/form-spinbutton/form-spinbutton.js index 8d5ab0c66bd..e7502c2c541 100644 --- a/src/components/form-spinbutton/form-spinbutton.js +++ b/src/components/form-spinbutton/form-spinbutton.js @@ -391,8 +391,9 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({ // `` listener, only enabled when mousedown starts const { type, button } = evt || {} /* istanbul ignore if */ - if (type === 'mouseup' && button) { - // we only care about left (main === 0) mouse button click + if ((type === 'mouseup' && button) || !this.$_mouseIsDown) { + // Ignore non left button (main === 0) mouse button click, and if + // the mouse/finger is not down, ignore (to prevent duplicate change events) return } this.resetTimers() From 97039556d9392e2985aad348eb20d6b9dd50b138 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 26 Feb 2020 18:39:18 -0400 Subject: [PATCH 3/5] Update form-spinbutton.js --- src/components/form-spinbutton/form-spinbutton.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/form-spinbutton/form-spinbutton.js b/src/components/form-spinbutton/form-spinbutton.js index e7502c2c541..9e2fb5f656d 100644 --- a/src/components/form-spinbutton/form-spinbutton.js +++ b/src/components/form-spinbutton/form-spinbutton.js @@ -441,6 +441,7 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({ }) const handler = evt => { if (!isDisabled && !isReadonly && !this.$_mouseIsDown) { + this.$_mouseIsDown = true this.setMouseup(true) this.handleStepRepeat(evt, stepper) } From e2712207a6d51d9f3129f50115389c4a487480f5 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 26 Feb 2020 18:54:42 -0400 Subject: [PATCH 4/5] Update form-spinbutton.js --- src/components/form-spinbutton/form-spinbutton.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/form-spinbutton/form-spinbutton.js b/src/components/form-spinbutton/form-spinbutton.js index 9e2fb5f656d..7fa8fc3bb1a 100644 --- a/src/components/form-spinbutton/form-spinbutton.js +++ b/src/components/form-spinbutton/form-spinbutton.js @@ -237,7 +237,6 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({ this.$_autoDelayTimer = null this.$_autoRepeatTimer = null this.$_keyIsDown = false - this.$_mouseIsDown = false }, beforeDestroy() { this.clearRepeat() @@ -391,11 +390,11 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({ // `` listener, only enabled when mousedown starts const { type, button } = evt || {} /* istanbul ignore if */ - if ((type === 'mouseup' && button) || !this.$_mouseIsDown) { - // Ignore non left button (main === 0) mouse button click, and if - // the mouse/finger is not down, ignore (to prevent duplicate change events) + if ((type === 'mouseup' && button)) { + // Ignore non left button (main === 0) mouse button click return } + evt.preventDefault() this.resetTimers() this.setMouseup(false) // Trigger the change event @@ -408,7 +407,6 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({ eventOnOff(on, document.body, 'mouseup', this.onMouseup, EVENT_OPTIONS_PASSIVE) eventOnOff(on, document.body, 'touchend', this.onMouseup, EVENT_OPTIONS_PASSIVE) } catch {} - this.$_mouseIsDown = on }, resetTimers() { clearTimeout(this.$_autoDelayTimer) @@ -418,7 +416,6 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({ this.resetTimers() this.setMouseup(false) this.$_keyIsDown = false - this.$_mouseIsDown = false } }, render(h) { @@ -440,8 +437,8 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({ attrs: { 'aria-hidden': 'true' } }) const handler = evt => { - if (!isDisabled && !isReadonly && !this.$_mouseIsDown) { - this.$_mouseIsDown = true + if (!isDisabled && !isReadonly) { + evt.preventDefault() this.setMouseup(true) this.handleStepRepeat(evt, stepper) } From f76860b02a50afdcbb310db5f3abb3561b8be88e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Wed, 26 Feb 2020 18:55:27 -0400 Subject: [PATCH 5/5] Update form-spinbutton.js --- src/components/form-spinbutton/form-spinbutton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form-spinbutton/form-spinbutton.js b/src/components/form-spinbutton/form-spinbutton.js index 7fa8fc3bb1a..f977550ed05 100644 --- a/src/components/form-spinbutton/form-spinbutton.js +++ b/src/components/form-spinbutton/form-spinbutton.js @@ -390,7 +390,7 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({ // `` listener, only enabled when mousedown starts const { type, button } = evt || {} /* istanbul ignore if */ - if ((type === 'mouseup' && button)) { + if (type === 'mouseup' && button) { // Ignore non left button (main === 0) mouse button click return }