From 72d0bc217758eee22daee9e7b83d996d7df008cd Mon Sep 17 00:00:00 2001
From: Hefty <yeyuqiudeng@gmail.com>
Date: Sat, 2 Jul 2022 21:01:05 +0800
Subject: [PATCH] fix(components): add validate-event for form types component
 (#8173)

* fix(components): add validate-event for form types component

* chore: format code
---
 docs/en-US/component/cascader.md               |  1 +
 docs/en-US/component/checkbox.md               |  2 ++
 docs/en-US/component/color-picker.md           |  1 +
 docs/en-US/component/input-number.md           |  1 +
 docs/en-US/component/radio.md                  |  1 +
 docs/en-US/component/select-v2.md              |  1 +
 docs/en-US/component/select.md                 |  1 +
 docs/en-US/component/slider.md                 |  1 +
 docs/en-US/component/transfer.md               |  1 +
 packages/components/cascader/src/index.vue     | 12 ++++++++++--
 .../components/checkbox/src/checkbox-group.vue |  4 +++-
 packages/components/checkbox/src/checkbox.ts   | 18 ++++++++++++++++--
 .../components/checkbox/src/checkbox.type.ts   |  1 +
 packages/components/color-picker/src/index.vue | 10 ++++++++--
 .../input-number/src/input-number.ts           |  4 ++++
 .../input-number/src/input-number.vue          |  8 ++++++--
 packages/components/radio/src/radio-group.ts   |  4 ++++
 packages/components/radio/src/radio-group.vue  |  6 +++++-
 packages/components/select-v2/src/defaults.ts  |  4 ++++
 packages/components/select-v2/src/useSelect.ts |  2 +-
 packages/components/select/src/select.vue      |  4 ++++
 packages/components/select/src/useSelect.ts    |  2 +-
 .../slider/src/composables/use-watch.ts        |  8 ++++++--
 packages/components/slider/src/slider.ts       |  4 ++++
 packages/components/transfer/src/transfer.ts   |  4 ++++
 packages/components/transfer/src/transfer.vue  |  4 +++-
 26 files changed, 94 insertions(+), 15 deletions(-)

diff --git a/docs/en-US/component/cascader.md b/docs/en-US/component/cascader.md
index 3f9dcfc166..469d4d6fda 100644
--- a/docs/en-US/component/cascader.md
+++ b/docs/en-US/component/cascader.md
@@ -159,6 +159,7 @@ cascader/panel
 | teleported                        | whether cascader popup is teleported                                                                                                                                             | boolean                 | true / false                | true    |
 | popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false                                                      | boolean                 | -                           | true    |
 | tag-type                          | tag type                                                                                                                                                                         | string                  | success/info/warning/danger | info    |
+| validate-event                    | whether to trigger form validation                                                                                                                                               | boolean                 | -                           | true    |
 
 ## Cascader Events
 
diff --git a/docs/en-US/component/checkbox.md b/docs/en-US/component/checkbox.md
index d3c8063f71..6eb8317c60 100644
--- a/docs/en-US/component/checkbox.md
+++ b/docs/en-US/component/checkbox.md
@@ -89,6 +89,7 @@ checkbox/with-border
 | name                  | native 'name' attribute                                   | string                             | —                      | —       |
 | checked               | if the Checkbox is checked                                | boolean                            | —                      | false   |
 | indeterminate         | same as `indeterminate` in native checkbox                | boolean                            | —                      | false   |
+| validate-event        | whether to trigger form validation                        | boolean                            | -                      | true    |
 
 ## Checkbox Events
 
@@ -114,6 +115,7 @@ checkbox/with-border
 | label                 | label for screen reader                           | string  | —                      | —       |
 | text-color            | font color when button is active                  | string  | —                      | #ffffff |
 | fill                  | border and background color when button is active | string  | —                      | #409EFF |
+| validate-event        | whether to trigger form validation                | boolean | -                      | true    |
 
 ## Checkbox-group Events
 
diff --git a/docs/en-US/component/color-picker.md b/docs/en-US/component/color-picker.md
index 6021f250bc..a824b6267a 100644
--- a/docs/en-US/component/color-picker.md
+++ b/docs/en-US/component/color-picker.md
@@ -50,6 +50,7 @@ color-picker/sizes
 | color-format          | color format of v-model                      | string  | hsl / hsv / hex / rgb  | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
 | popper-class          | custom class name for ColorPicker's dropdown | string  | —                      | —                                                             |
 | predefine             | predefined color options                     | array   | —                      | —                                                             |
+| validate-event        | whether to trigger form validation           | boolean | -                      | true                                                          |
 
 ## Events
 
diff --git a/docs/en-US/component/input-number.md b/docs/en-US/component/input-number.md
index 70ac0f524a..1c820b548b 100644
--- a/docs/en-US/component/input-number.md
+++ b/docs/en-US/component/input-number.md
@@ -97,6 +97,7 @@ input-number/controlled
 | label                         | label text                                       | string                 | —               | —           |
 | placeholder                   | placeholder in input                             | string                 | -               | -           |
 | value-on-clear **(\> 2.2.0)** | value should be set when input box is cleared    | string / number / null | min/max         | -           |
+| validate-event                | whether to trigger form validation               | boolean                | -               | true        |
 
 ## Events
 
diff --git a/docs/en-US/component/radio.md b/docs/en-US/component/radio.md
index 5d199b4e0e..951732554a 100644
--- a/docs/en-US/component/radio.md
+++ b/docs/en-US/component/radio.md
@@ -87,6 +87,7 @@ radio/with-borders
 | disabled              | whether the nesting radios are disabled           | boolean                   | —                       | false   |
 | text-color            | font color when button is active                  | string                    | —                       | #ffffff |
 | fill                  | border and background color when button is active | string                    | —                       | #409EFF |
+| validate-event        | whether to trigger form validation                | boolean                   | -                       | true    |
 
 ## Radio-group Events
 
diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md
index 8222a178b5..63e63e3ea6 100644
--- a/docs/en-US/component/select-v2.md
+++ b/docs/en-US/component/select-v2.md
@@ -157,6 +157,7 @@ select-v2/remote-search
 | scrollbar-always-on               | Controls whether the scrollbar is always displayed                                                                                       | boolean                            | -                   | false         |
 | remote                            | whether search data from server                                                                                                          | boolean                            | —                   | false         |
 | remote-method                     | function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true | function(keyword: string)          | —                   | —             |
+| validate-event                    | whether to trigger form validation                                                                                                       | boolean                            | -                   | true          |
 
 <span style="display: none;">
 <!-- | default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md
index 3b71c334b4..a0495ddb6e 100644
--- a/docs/en-US/component/select.md
+++ b/docs/en-US/component/select.md
@@ -146,6 +146,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | fit-input-width                   | whether the width of the dropdown is the same as the input                                                                  | boolean                            | —                           | false            |
 | suffix-icon                       | Custom suffix icon component                                                                                                | string / Component                 | —                           | ArrowUp          |
 | tag-type                          | tag type                                                                                                                    | string                             | success/info/warning/danger | info             |
+| validate-event                    | whether to trigger form validation                                                                                          | boolean                            | -                           | true             |
 
 ## Select Events
 
diff --git a/docs/en-US/component/slider.md b/docs/en-US/component/slider.md
index e10b84ebf4..31d624a7b1 100644
--- a/docs/en-US/component/slider.md
+++ b/docs/en-US/component/slider.md
@@ -97,6 +97,7 @@ slider/show-marks
 | debounce              | debounce delay when typing, in milliseconds, works when `show-input` is true                              | number          | —                       | 300     |
 | tooltip-class         | custom class name for the tooltip                                                                         | string          | —                       | —       |
 | marks                 | marks， type of key must be `number` and must in closed interval `[min, max]`, each mark can custom style | object          | —                       | —       |
+| validate-event        | whether to trigger form validation                                                                        | boolean         | -                       | true    |
 
 ## Events
 
diff --git a/docs/en-US/component/transfer.md b/docs/en-US/component/transfer.md
index 3d254cd88a..9401adbd1c 100644
--- a/docs/en-US/component/transfer.md
+++ b/docs/en-US/component/transfer.md
@@ -42,6 +42,7 @@ transfer/prop-alias
 | props                 | prop aliases for data source                                                                                                                                                                                                                                                       | object`{key, label, disabled}`    | —                         | —                                                                         |
 | left-default-checked  | key array of initially checked data items of the left list                                                                                                                                                                                                                         | array                             | —                         | [ ]                                                                       |
 | right-default-checked | key array of initially checked data items of the right list                                                                                                                                                                                                                        | array                             | —                         | [ ]                                                                       |
+| validate-event        | whether to trigger form validation                                                                                                                                                                                                                                                 | boolean                           | -                         | true                                                                      |
 
 ## Slots
 
diff --git a/packages/components/cascader/src/index.vue b/packages/components/cascader/src/index.vue
index a389659695..444389dea1 100644
--- a/packages/components/cascader/src/index.vue
+++ b/packages/components/cascader/src/index.vue
@@ -177,7 +177,9 @@
             @click="handleSuggestionClick(item)"
           >
             <span>{{ item.text }}</span>
-            <el-icon v-if="item.checked"><check /></el-icon>
+            <el-icon v-if="item.checked">
+              <check />
+            </el-icon>
           </li>
         </template>
         <slot v-else name="empty">
@@ -339,6 +341,10 @@ export default defineComponent({
     teleported: useTooltipContentProps.teleported,
     // eslint-disable-next-line vue/require-prop-types
     tagType: { ...tagProps.type, default: 'info' },
+    validateEvent: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   emits: [
@@ -421,7 +427,9 @@ export default defineComponent({
       set(val) {
         emit(UPDATE_MODEL_EVENT, val)
         emit(CHANGE_EVENT, val)
-        elFormItem.validate?.('change').catch((err) => debugWarn(err))
+        if (props.validateEvent) {
+          elFormItem.validate?.('change').catch((err) => debugWarn(err))
+        }
       },
     })
 
diff --git a/packages/components/checkbox/src/checkbox-group.vue b/packages/components/checkbox/src/checkbox-group.vue
index 3c8c17daa7..482da0f3d5 100644
--- a/packages/components/checkbox/src/checkbox-group.vue
+++ b/packages/components/checkbox/src/checkbox-group.vue
@@ -65,7 +65,9 @@ provide('CheckboxGroup', {
 watch(
   () => props.modelValue,
   () => {
-    elFormItem.validate?.('change').catch((err) => debugWarn(err))
+    if (props.validateEvent) {
+      elFormItem.validate?.('change').catch((err) => debugWarn(err))
+    }
   }
 )
 </script>
diff --git a/packages/components/checkbox/src/checkbox.ts b/packages/components/checkbox/src/checkbox.ts
index 18c4d42711..5ba2f10aed 100644
--- a/packages/components/checkbox/src/checkbox.ts
+++ b/packages/components/checkbox/src/checkbox.ts
@@ -50,6 +50,10 @@ export const useCheckboxGroupProps = {
     type: String,
     default: 'div',
   },
+  validateEvent: {
+    type: Boolean,
+    default: true,
+  },
 }
 
 export type IUseCheckboxGroupProps = ExtractPropTypes<
@@ -90,6 +94,10 @@ export const checkboxProps = {
   border: Boolean,
   size: useSizeProp,
   tabindex: [String, Number],
+  validateEvent: {
+    type: Boolean,
+    default: true,
+  },
 }
 
 export const useCheckboxGroup = () => {
@@ -259,7 +267,7 @@ const useEvent = (
       ReturnType<typeof useFormItemInputId>
   >
 ) => {
-  const { elFormItem } = useCheckboxGroup()
+  const { elFormItem, checkboxGroup } = useCheckboxGroup()
   const { emit } = getCurrentInstance()!
 
   function getLabeledValue(value: string | number | boolean) {
@@ -296,10 +304,16 @@ const useEvent = (
     }
   }
 
+  const validateEvent = computed(
+    () => checkboxGroup.validateEvent?.value || props.validateEvent
+  )
+
   watch(
     () => props.modelValue,
     () => {
-      elFormItem?.validate?.('change').catch((err) => debugWarn(err))
+      if (validateEvent.value) {
+        elFormItem?.validate?.('change').catch((err) => debugWarn(err))
+      }
     }
   )
 
diff --git a/packages/components/checkbox/src/checkbox.type.ts b/packages/components/checkbox/src/checkbox.type.ts
index 6c508d051e..59ff8e58b5 100644
--- a/packages/components/checkbox/src/checkbox.type.ts
+++ b/packages/components/checkbox/src/checkbox.type.ts
@@ -10,5 +10,6 @@ export interface ICheckboxGroupInstance {
   fill?: ComputedRef<string>
   textColor?: ComputedRef<string>
   checkboxGroupSize?: ComputedRef<ComponentSize>
+  validateEvent?: ComputedRef<boolean>
   changeEvent?: (...args: any[]) => any
 }
diff --git a/packages/components/color-picker/src/index.vue b/packages/components/color-picker/src/index.vue
index b4eaed9bca..9becab984f 100644
--- a/packages/components/color-picker/src/index.vue
+++ b/packages/components/color-picker/src/index.vue
@@ -178,6 +178,10 @@ export default defineComponent({
       default: 0,
     },
     predefine: Array,
+    validateEvent: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ['change', 'active-change', UPDATE_MODEL_EVENT],
   setup(props, { emit }) {
@@ -313,7 +317,9 @@ export default defineComponent({
       const value = color.value
       emit(UPDATE_MODEL_EVENT, value)
       emit('change', value)
-      elFormItem.validate?.('change').catch((err) => debugWarn(err))
+      if (props.validateEvent) {
+        elFormItem.validate?.('change').catch((err) => debugWarn(err))
+      }
       debounceSetShowPicker(false)
       // check if modelValue change, if not change, then reset color.
       nextTick(() => {
@@ -332,7 +338,7 @@ export default defineComponent({
       debounceSetShowPicker(false)
       emit(UPDATE_MODEL_EVENT, null)
       emit('change', null)
-      if (props.modelValue !== null) {
+      if (props.modelValue !== null && props.validateEvent) {
         elFormItem.validate?.('change').catch((err) => debugWarn(err))
       }
       resetColor()
diff --git a/packages/components/input-number/src/input-number.ts b/packages/components/input-number/src/input-number.ts
index 1f199aa83f..abe19715a2 100644
--- a/packages/components/input-number/src/input-number.ts
+++ b/packages/components/input-number/src/input-number.ts
@@ -53,6 +53,10 @@ export const inputNumberProps = buildProps({
     validator: (val: number) =>
       val >= 0 && val === Number.parseInt(`${val}`, 10),
   },
+  validateEvent: {
+    type: Boolean,
+    default: true,
+  },
 } as const)
 export type InputNumberProps = ExtractPropTypes<typeof inputNumberProps>
 
diff --git a/packages/components/input-number/src/input-number.vue b/packages/components/input-number/src/input-number.vue
index 57165ac658..6b4f21be09 100644
--- a/packages/components/input-number/src/input-number.vue
+++ b/packages/components/input-number/src/input-number.vue
@@ -220,7 +220,9 @@ const setCurrentValue = (value: number | string | null | undefined) => {
   emit('update:modelValue', newVal!)
   emit('input', newVal)
   emit('change', newVal!, oldVal!)
-  formItem?.validate?.('change').catch((err) => debugWarn(err))
+  if (props.validateEvent) {
+    formItem?.validate?.('change').catch((err) => debugWarn(err))
+  }
   data.currentValue = newVal
 }
 const handleInput = (value: string) => {
@@ -248,7 +250,9 @@ const handleFocus = (event: MouseEvent | FocusEvent) => {
 
 const handleBlur = (event: MouseEvent | FocusEvent) => {
   emit('blur', event)
-  formItem?.validate?.('blur').catch((err) => debugWarn(err))
+  if (props.validateEvent) {
+    formItem?.validate?.('blur').catch((err) => debugWarn(err))
+  }
 }
 
 watch(
diff --git a/packages/components/radio/src/radio-group.ts b/packages/components/radio/src/radio-group.ts
index beec2e878e..9cbe25c214 100644
--- a/packages/components/radio/src/radio-group.ts
+++ b/packages/components/radio/src/radio-group.ts
@@ -31,6 +31,10 @@ export const radioGroupProps = buildProps({
     type: String,
     default: undefined,
   },
+  validateEvent: {
+    type: Boolean,
+    default: true,
+  },
 } as const)
 export type RadioGroupProps = ExtractPropTypes<typeof radioGroupProps>
 
diff --git a/packages/components/radio/src/radio-group.vue b/packages/components/radio/src/radio-group.vue
index e33ae528ea..15dbb123d1 100644
--- a/packages/components/radio/src/radio-group.vue
+++ b/packages/components/radio/src/radio-group.vue
@@ -78,6 +78,10 @@ provide(
 
 watch(
   () => props.modelValue,
-  () => formItem?.validate('change').catch((err) => debugWarn(err))
+  () => {
+    if (props.validateEvent) {
+      formItem?.validate('change').catch((err) => debugWarn(err))
+    }
+  }
 )
 </script>
diff --git a/packages/components/select-v2/src/defaults.ts b/packages/components/select-v2/src/defaults.ts
index a01eaeeb9c..243238285f 100644
--- a/packages/components/select-v2/src/defaults.ts
+++ b/packages/components/select-v2/src/defaults.ts
@@ -97,6 +97,10 @@ export const SelectProps = {
     type: Boolean,
     default: false,
   },
+  validateEvent: {
+    type: Boolean,
+    default: true,
+  },
 }
 
 export const OptionProps = {
diff --git a/packages/components/select-v2/src/useSelect.ts b/packages/components/select-v2/src/useSelect.ts
index b8c2d80b50..fe240fa982 100644
--- a/packages/components/select-v2/src/useSelect.ts
+++ b/packages/components/select-v2/src/useSelect.ts
@@ -714,7 +714,7 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
       if (!val || val.toString() !== states.previousValue) {
         initStates()
       }
-      if (!isEqual(val, oldVal)) {
+      if (!isEqual(val, oldVal) && props.validateEvent) {
         elFormItem?.validate?.('change').catch((err) => debugWarn(err))
       }
     },
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index 461e70aa4e..d6b05caaa0 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -383,6 +383,10 @@ export default defineComponent({
     },
     // eslint-disable-next-line vue/require-prop-types
     tagType: { ...tagProps.type, default: 'info' },
+    validateEvent: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: [
     UPDATE_MODEL_EVENT,
diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts
index 758ab8b07f..df30e79d56 100644
--- a/packages/components/select/src/useSelect.ts
+++ b/packages/components/select/src/useSelect.ts
@@ -210,7 +210,7 @@ export const useSelect = (props, states: States, ctx) => {
       if (props.filterable && !props.multiple) {
         states.inputLength = 20
       }
-      if (!isEqual(val, oldVal)) {
+      if (!isEqual(val, oldVal) && props.validateEvent) {
         elFormItem.validate?.('change').catch((err) => debugWarn(err))
       }
     },
diff --git a/packages/components/slider/src/composables/use-watch.ts b/packages/components/slider/src/composables/use-watch.ts
index 5f87f86ea1..da6fbe10aa 100644
--- a/packages/components/slider/src/composables/use-watch.ts
+++ b/packages/components/slider/src/composables/use-watch.ts
@@ -48,7 +48,9 @@ export const useWatch = (
         initData.firstValue = val[0]
         initData.secondValue = val[1]
         if (valueChanged()) {
-          elFormItem?.validate?.('change').catch((err) => debugWarn(err))
+          if (props.validateEvent) {
+            elFormItem?.validate?.('change').catch((err) => debugWarn(err))
+          }
           initData.oldValue = val.slice()
         }
       }
@@ -60,7 +62,9 @@ export const useWatch = (
       } else {
         initData.firstValue = val
         if (valueChanged()) {
-          elFormItem?.validate?.('change').catch((err) => debugWarn(err))
+          if (props.validateEvent) {
+            elFormItem?.validate?.('change').catch((err) => debugWarn(err))
+          }
           initData.oldValue = val
         }
       }
diff --git a/packages/components/slider/src/slider.ts b/packages/components/slider/src/slider.ts
index 8e9bd1dbc0..cb4df9d30a 100644
--- a/packages/components/slider/src/slider.ts
+++ b/packages/components/slider/src/slider.ts
@@ -93,6 +93,10 @@ export const sliderProps = buildProps({
   marks: {
     type: definePropType<SliderMarks>(Object),
   },
+  validateEvent: {
+    type: Boolean,
+    default: true,
+  },
 } as const)
 export type SliderProps = ExtractPropTypes<typeof sliderProps>
 
diff --git a/packages/components/transfer/src/transfer.ts b/packages/components/transfer/src/transfer.ts
index 08d37ce8c0..b0551e59b8 100644
--- a/packages/components/transfer/src/transfer.ts
+++ b/packages/components/transfer/src/transfer.ts
@@ -89,6 +89,10 @@ export const transferProps = buildProps({
     values: ['original', 'push', 'unshift'],
     default: 'original',
   },
+  validateEvent: {
+    type: Boolean,
+    default: true,
+  },
 } as const)
 export type TransferProps = ExtractPropTypes<typeof transferProps>
 
diff --git a/packages/components/transfer/src/transfer.vue b/packages/components/transfer/src/transfer.vue
index c3ecc1b43b..41adad889c 100644
--- a/packages/components/transfer/src/transfer.vue
+++ b/packages/components/transfer/src/transfer.vue
@@ -135,7 +135,9 @@ const panelFilterPlaceholder = computed(
 watch(
   () => props.modelValue,
   () => {
-    formItem?.validate?.('change').catch((err) => debugWarn(err))
+    if (props.validateEvent) {
+      formItem?.validate?.('change').catch((err) => debugWarn(err))
+    }
   }
 )