fix(VRangeSlider): add unique id for inputs elements (#10654)

fixes #6843 * fix(breakpoint): Passing 0 value to scrollBarWidth * refactor(breakpoint): Passing 0 to scrollBarWidth * fix(vrangeslider): add uniq id for inputs elements re #6843 * Update packages/vuetify/src/components/VRangeSlider/VRangeSlider.ts Co-Authored-By: Andrew Henry <AMajesticPotatoe@gmail.com> * test(vrangeslider): update snapshots * refactor(vrangeslider): cleared code style * refactor(vrangeslider): assignment ids algorithm moved to direct logic * Update packages/vuetify/src/components/VRangeSlider/VRangeSlider.ts Co-Authored-By: John Leider <john@vuetifyjs.com> Co-authored-by: Andrew Henry <AMajesticPotatoe@gmail.com> Co-authored-by: Jacek Karczmarczyk <jkarczm@gmail.com> Co-authored-by: John Leider <john@vuetifyjs.com>
vuetifyjs · Feb 25, 2020 · 1244991 · 1244991
1 parent 539a4ad
commit 1244991
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/packages/vuetify/src/components/VRangeSlider/VRangeSlider.ts b/packages/vuetify/src/components/VRangeSlider/VRangeSlider.ts
@@ -107,6 +107,7 @@ export default VSlider.extend({
         input.data = input.data || {}
         input.data.attrs = input.data.attrs || {}
         input.data.attrs.value = this.internalValue[i]
+        input.data.attrs.id = `input-${i ? 'max' : 'min'}-${this._uid}`
 
         return input
       })

diff --git a/packages/vuetify/src/components/VRangeSlider/__tests__/VRangeSlider.spec.ts b/packages/vuetify/src/components/VRangeSlider/__tests__/VRangeSlider.spec.ts
@@ -220,4 +220,12 @@ describe('VRangeSlider.ts', () => {
       expect(wrapper.vm.internalValue).toEqual([0, 0])
     })
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/6843
+  it('should be uniq id', async () => {
+    const wrapper = mountFunction()
+    const [min, max] = wrapper.vm.genInput()
+
+    expect(min.data.attrs.id).not.toEqual(max.data.attrs.id)
+  })
 })
diff --git a/...ges/vuetify/src/components/VRangeSlider/__tests__/__snapshots__/VRangeSlider.spec.ts.snap b/...ges/vuetify/src/components/VRangeSlider/__tests__/__snapshots__/VRangeSlider.spec.ts.snap
@@ -6,12 +6,12 @@ exports[`VRangeSlider.ts should render a vertical slider 1`] = `
     <div class="v-input__slot">
       <div class="v-slider v-slider--vertical theme--light">
         <input value="0"
-               id="input-29"
+               id="input-min-29"
                readonly="readonly"
                tabindex="-1"
         >
         <input value="0"
-               id="input-29"
+               id="input-max-29"
                readonly="readonly"
                tabindex="-1"
         >
@@ -68,13 +68,13 @@ exports[`VRangeSlider.ts should render disabled slider 1`] = `
     <div class="v-input__slot">
       <div class="v-slider v-slider--horizontal v-slider--disabled theme--light">
         <input value="0"
-               id="input-33"
+               id="input-min-33"
                disabled="disabled"
                readonly="readonly"
                tabindex="-1"
         >
         <input value="0"
-               id="input-33"
+               id="input-max-33"
                disabled="disabled"
                readonly="readonly"
                tabindex="-1"