ColorPicker: fix invalid hue bar click when saturation is zero (#5080)

packages/color-picker/src/components/hue-slider.vue

@@ -33,7 +33,7 @@
     },
 
     watch: {
-      'color.value'() {
+      'color._hue'() {
         this.update();
       }
     },

packages/color-picker/src/components/sv-panel.vue

@@ -30,6 +30,15 @@
     watch: {
       'color.value'() {
         this.update();
+      },
+      /*
+       * FIXME: trigger update twice
+       * when saturation is zero, modify hue will not change value.
+       * panel also not to be updated. so i subscribe the hue change to update panel too.
+       * but if hue changed, update will be call twice.
+       */
+      'color._hue'() {
+        this.update();
       }
     },
 

test/unit/specs/color-picker.spec.js

@@ -184,6 +184,33 @@ describe('ColorPicker', () => {
     }, ANIMATION_TIME);
   });
 
+  it('should change hue when saturation is zero', (done) => {
+    const vm = createVue({
+      template: `
+        <el-color-picker v-model="color"></el-color-picker>
+      `,
+
+      data() {
+        return {
+          color: '#FFFFFF'
+        };
+      }
+    }, true);
+
+    const trigger = vm.$el.querySelector('.el-color-picker__trigger');
+    trigger.click();
+
+    setTimeout(() => {
+      const hueBar = document.querySelector('.el-color-hue-slider');
+      hueBar.__vue__.handleClick({ target: null, clientX: 0, clientY: 1000 });
+      vm.$nextTick(() => {
+        const thumb = document.querySelector('.el-color-hue-slider__thumb');
+        expect(parseInt(thumb.style.top, 10) > 0).to.true;
+        done();
+      });
+    }, ANIMATION_TIME);
+  });
+
   it('should change alpha when clicking the alpha bar', (done) => {
     const vm = createVue({
       template: `