ColorPicker: not trigger form validation when dragging (#13299)

* ColorPicker: not trigger form validation when dragging

* update test case for input

examples/docs/en-US/input.md

@@ -666,6 +666,7 @@ Search data from server-side.
 |form | same as `form` in native input | string | — | — |
 | label | label text | string | — | — |
 | tabindex | input tabindex | string | - | - |
+| validate-event | whether to trigger form validation | boolean | - | - |
 
 ### Input slots
 

examples/docs/es/input.md

@@ -704,6 +704,7 @@ Búsqueda de datos desde el servidor.
 | suffix-icon           | suffix icon class                                                                                                                                  | string                          | —                                                              | —            |
 | hide-loading          | si se debe ocultar el icono de loading en la búsqueda remota                                                                                       | boolean                         | —                                                              | false        |
 | popper-append-to-body | si añadir el desplegable al cuerpo. Si la posición del menú desplegable es incorrecta, puede intentar establecer este prop a false                 | boolean                         | -                                                              | true         |
+| validate-event        | whether to trigger form validation                                                                                                                 | boolean                         | -                                                              | -            |
 
 ### Autocomplete Slots
 

examples/docs/zh-CN/input.md

@@ -822,6 +822,7 @@ export default {
 | form | 原生属性 | string | — | — |
 | label | 输入框关联的label文字 | string | — | — |
 | tabindex | 输入框的tabindex | string | - | - |
+| validate-event | 输入时是否触发表单的校验 | boolean | - | - |
 
 ### Input Slots
 | name | 说明 |

packages/color-picker/src/components/picker-dropdown.vue

@@ -15,6 +15,7 @@
             v-model="customInput"
             @keyup.native.enter="handleConfirm"
             @blur="handleConfirm"
+            :validate-event="false"
             size="mini">
           </el-input>
         </span>

packages/color-picker/src/main.vue

@@ -34,10 +34,13 @@
   import Color from './color';
   import PickerDropdown from './components/picker-dropdown.vue';
   import Clickoutside from 'element-ui/src/utils/clickoutside';
+  import Emitter from 'element-ui/src/mixins/emitter';
 
   export default {
     name: 'ElColorPicker',
 
+    mixins: [Emitter],
+
     props: {
       value: String,
       showAlpha: Boolean,
@@ -115,14 +118,19 @@
         if (this.colorDisabled) return;
         this.showPicker = !this.showPicker;
       },
-      confirmValue(value) {
+      confirmValue() {
-        this.$emit('input', this.color.value);
+        const value = this.color.value;
-        this.$emit('change', this.color.value);
+        this.$emit('input', value);
+        this.$emit('change', value);
+        this.dispatch('ElFormItem', 'el.form.change', value);
         this.showPicker = false;
       },
       clearValue() {
         this.$emit('input', null);
         this.$emit('change', null);
+        if (this.value !== null) {
+          this.dispatch('ElFormItem', 'el.form.change', null);
+        }
         this.showPanelColor = false;
         this.showPicker = false;
         this.resetColor();

test/unit/specs/input.spec.js

@@ -207,6 +207,42 @@ describe('Input', () => {
     }, 20);
   });
 
+  it('validateEvent', done => {
+    const spy = sinon.spy();
+    vm = createVue({
+      template: `
+        <el-form :model="model" :rules="rules">
+          <el-form-item prop="input">
+            <el-input v-model="model.input" :validate-event="false">
+            </el-input>
+          </el-form-item>
+        </el-form>
+      `,
+      data() {
+        const validator = (rule, value, callback) => {
+          spy();
+          callback();
+        };
+        return {
+          model: {
+            input: ''
+          },
+          rules: {
+            input: [
+              { validator }
+            ]
+          }
+        };
+      }
+    }, true);
+
+    vm.model.input = '123';
+    vm.$nextTick(() => {
+      expect(spy.called).to.be.false;
+      done();
+    });
+  });
+
   describe('Input Events', () => {
     it('event:focus & blur', done => {
       vm = createVue({

types/input.d.ts

@@ -78,6 +78,9 @@ export declare class ElInput extends ElementUIComponent {
   /** Same as form in native input */
   form: string
 
+  /** Whether to trigger form validatio */
+  validateEvent: boolean
+
   /**
    * Focus the Input component
    */