fix(VRangeSlider): fix focus/blur events not emitting (#8295)

* fix(VRangeSlider): fix focus/blur events not emitting closes #8290 * fix(VRangeSlider): emit correct change value when using keys
vuetifyjs · Aug 12, 2019 · 56c7e65 · 56c7e65
1 parent 014910a
commit 56c7e65
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 18 deletions.
diff --git a/packages/vuetify/src/components/VRangeSlider/VRangeSlider.ts b/packages/vuetify/src/components/VRangeSlider/VRangeSlider.ts
@@ -161,44 +161,51 @@ export default VSlider.extend({
           const onFocus = (e: Event) => {
             this.isFocused = true
             this.activeThumb = index
+
+            this.$emit('focus', e)
+          }
+
+          const onBlur = (e: Event) => {
+            this.isFocused = false
+            this.activeThumb = null
+
+            this.$emit('blur', e)
           }
 
           const valueWidth = this.inputWidth[index]
           const isActive = this.isActive && this.activeThumb === index
           const isFocused = this.isFocused && this.activeThumb === index
 
-          return this.genThumbContainer(value, valueWidth, isActive, isFocused, onDrag, onFocus, `thumb_${index}`)
+          return this.genThumbContainer(value, valueWidth, isActive, isFocused, onDrag, onFocus, onBlur, `thumb_${index}`)
         }),
       ]
     },
-    onFocus (index: number) {
-      this.isFocused = true
-      this.activeThumb = index
-    },
-    onBlur () {
-      this.isFocused = false
-      this.activeThumb = null
-    },
     onSliderClick (e: MouseEvent) {
       if (!this.isActive) {
         if (this.noClick) {
           this.noClick = false
           return
         }
 
-        // It doesn't seem to matter if we focus on the wrong thumb here
-        const thumb = this.$refs.thumb_1 as HTMLElement
-        thumb.focus()
+        const { value, isInsideTrack } = this.parseMouseMove(e)
+
+        if (isInsideTrack) {
+          this.activeThumb = this.getIndexOfClosestValue(this.internalValue, value)
+          const refName = `thumb_${this.activeThumb}`
+          const thumbRef = this.$refs[refName] as HTMLElement
+          thumbRef.focus()
+        }
+
+        this.setInternalValue(value)
 
-        this.onMouseMove(e, true)
         this.$emit('change', this.internalValue)
       }
     },
-    onMouseMove (e: MouseEvent, trackClick = false) {
+    onMouseMove (e: MouseEvent) {
       const { value, isInsideTrack } = this.parseMouseMove(e)
 
       if (isInsideTrack) {
-        if (trackClick) this.activeThumb = this.getIndexOfClosestValue(this.internalValue, value)
+        this.activeThumb = this.getIndexOfClosestValue(this.internalValue, value)
       }
 
       this.setInternalValue(value)
@@ -211,7 +218,7 @@ export default VSlider.extend({
       if (value == null) return
 
       this.setInternalValue(value)
-      this.$emit('change', value)
+      this.$emit('change', this.internalValue)
     },
     setInternalValue (value: number) {
       this.internalValue = this.internalValue.map((v: number, i: number) => {

diff --git a/packages/vuetify/src/components/VSlider/VSlider.ts b/packages/vuetify/src/components/VSlider/VSlider.ts
@@ -276,7 +276,8 @@ export default mixins<options &
           this.isActive,
           this.isFocused,
           this.onThumbMouseDown,
-          this.onFocus
+          this.onFocus,
+          this.onBlur,
         ),
       ]
     },
@@ -362,6 +363,7 @@ export default mixins<options &
       isFocused: boolean,
       onDrag: Function,
       onFocus: Function,
+      onBlur: Function,
       ref = 'thumb'
     ): VNode {
       const children = [this.genThumb()]
@@ -391,7 +393,7 @@ export default mixins<options &
         },
         on: {
           focus: onFocus,
-          blur: this.onBlur,
+          blur: onBlur,
           keydown: this.onKeyDown,
           keyup: this.onKeyUp,
           touchstart: onDrag,