From bbed5a5e96708eaf47ffef853acf6161a96b8612 Mon Sep 17 00:00:00 2001
From: Ryan2128 <33176053+Ryan2128@users.noreply.github.com>
Date: Wed, 22 Dec 2021 17:37:42 +0800
Subject: [PATCH] fix(components): [select-v2] missing validate action when
 clear (#4892)

* fix(components): [select-v2] missing validate action when clear

- Fix the bug that missing validate when clear
- Add the same icon and style as the select component

* docs: [select-v2] fix demo render error
---
 docs/examples/select-v2/allow-create.vue      |  2 +-
 docs/examples/select-v2/basic-usage.vue       |  2 +-
 docs/examples/select-v2/clearable.vue         |  2 +-
 docs/examples/select-v2/customized-option.vue |  2 +-
 docs/examples/select-v2/disabled.vue          |  2 +-
 docs/examples/select-v2/filterable.vue        |  2 +-
 docs/examples/select-v2/grouping.vue          |  2 +-
 docs/examples/select-v2/hide-extra-tags.vue   |  2 +-
 docs/examples/select-v2/multiple.vue          |  2 +-
 packages/components/select-v2/src/select.vue  |  6 +++++
 .../components/select-v2/src/useSelect.ts     | 23 +++++++++++++------
 packages/theme-chalk/src/form.scss            |  1 +
 packages/theme-chalk/src/select-v2.scss       |  4 +++-
 13 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/docs/examples/select-v2/allow-create.vue b/docs/examples/select-v2/allow-create.vue
index 6ab1114c36..02f3a45ace 100644
--- a/docs/examples/select-v2/allow-create.vue
+++ b/docs/examples/select-v2/allow-create.vue
@@ -22,6 +22,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 
 const value1 = ref([])
 const value2 = ref('')
@@ -29,5 +30,4 @@ const options = Array.from({ length: 1000 }).map((_, idx) => ({
   value: `Option ${idx + 1}`,
   label: `${initials[idx % 10]}${idx}`,
 }))
-const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 </script>
diff --git a/docs/examples/select-v2/basic-usage.vue b/docs/examples/select-v2/basic-usage.vue
index 23bf2395e5..d9cdd2de51 100644
--- a/docs/examples/select-v2/basic-usage.vue
+++ b/docs/examples/select-v2/basic-usage.vue
@@ -20,13 +20,13 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 
 const value = ref('')
 const options = Array.from({ length: 1000 }).map((_, idx) => ({
   value: `Option ${idx + 1}`,
   label: `${initials[idx % 10]}${idx}`,
 }))
-const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 </script>
 
 <style scoped>
diff --git a/docs/examples/select-v2/clearable.vue b/docs/examples/select-v2/clearable.vue
index 4c6b5cafcc..817ff3386f 100644
--- a/docs/examples/select-v2/clearable.vue
+++ b/docs/examples/select-v2/clearable.vue
@@ -18,6 +18,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 
 const value1 = ref([])
 const value2 = ref('')
@@ -25,5 +26,4 @@ const options = Array.from({ length: 1000 }).map((_, idx) => ({
   value: `Option ${idx + 1}`,
   label: `${initials[idx % 10]}${idx}`,
 }))
-const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 </script>
diff --git a/docs/examples/select-v2/customized-option.vue b/docs/examples/select-v2/customized-option.vue
index c4c6f1677c..8525979ed9 100644
--- a/docs/examples/select-v2/customized-option.vue
+++ b/docs/examples/select-v2/customized-option.vue
@@ -18,11 +18,11 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 
 const value = ref([])
 const options = Array.from({ length: 1000 }).map((_, idx) => ({
   value: `Option ${idx + 1}`,
   label: `${initials[idx % 10]}${idx}`,
 }))
-const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 </script>
diff --git a/docs/examples/select-v2/disabled.vue b/docs/examples/select-v2/disabled.vue
index e0dc9b6ec1..de2f56c53d 100644
--- a/docs/examples/select-v2/disabled.vue
+++ b/docs/examples/select-v2/disabled.vue
@@ -20,6 +20,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 
 const value = ref([])
 const options = Array.from({ length: 1000 }).map((_, idx) => ({
@@ -27,5 +28,4 @@ const options = Array.from({ length: 1000 }).map((_, idx) => ({
   label: `${initials[idx % 10]}${idx}`,
   disabled: idx % 10 === 0,
 }))
-const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 </script>
diff --git a/docs/examples/select-v2/filterable.vue b/docs/examples/select-v2/filterable.vue
index fdeed711e1..e4b4112c6b 100644
--- a/docs/examples/select-v2/filterable.vue
+++ b/docs/examples/select-v2/filterable.vue
@@ -11,11 +11,11 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 
 const value = ref([])
 const options = Array.from({ length: 1000 }).map((_, idx) => ({
   value: `Option${idx + 1}`,
   label: `${initials[idx % 10]}${idx}`,
 }))
-const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 </script>
diff --git a/docs/examples/select-v2/grouping.vue b/docs/examples/select-v2/grouping.vue
index 5eb1c0d0f1..0881d884e7 100644
--- a/docs/examples/select-v2/grouping.vue
+++ b/docs/examples/select-v2/grouping.vue
@@ -11,6 +11,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 
 const value = ref([])
 const options = Array.from({ length: 10 }).map((_, idx) => {
@@ -24,5 +25,4 @@ const options = Array.from({ length: 10 }).map((_, idx) => {
     })),
   }
 })
-const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 </script>
diff --git a/docs/examples/select-v2/hide-extra-tags.vue b/docs/examples/select-v2/hide-extra-tags.vue
index 05f2c80196..3b5450de1d 100644
--- a/docs/examples/select-v2/hide-extra-tags.vue
+++ b/docs/examples/select-v2/hide-extra-tags.vue
@@ -11,11 +11,11 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 
 const value = ref([])
 const options = Array.from({ length: 1000 }).map((_, idx) => ({
   value: `Option ${idx + 1}`,
   label: `${initials[idx % 10]}${idx}`,
 }))
-const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 </script>
diff --git a/docs/examples/select-v2/multiple.vue b/docs/examples/select-v2/multiple.vue
index a69cc9625f..b8c65b730e 100644
--- a/docs/examples/select-v2/multiple.vue
+++ b/docs/examples/select-v2/multiple.vue
@@ -10,6 +10,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 
 const value = ref([])
 const options = ref(
@@ -18,5 +19,4 @@ const options = ref(
     label: `${initials[idx % 10]}${idx}`,
   }))
 )
-const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 </script>
diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue
index 46dbbfa336..cc9540f76d 100644
--- a/packages/components/select-v2/src/select.vue
+++ b/packages/components/select-v2/src/select.vue
@@ -218,6 +218,12 @@
             >
               <component :is="clearIcon" />
             </el-icon>
+            <el-icon
+              v-if="validateState && validateIcon"
+              class="el-input__icon el-input__validateIcon"
+            >
+              <component :is="validateIcon" />
+            </el-icon>
           </span>
         </div>
       </template>
diff --git a/packages/components/select-v2/src/useSelect.ts b/packages/components/select-v2/src/useSelect.ts
index aeddb03877..319452503d 100644
--- a/packages/components/select-v2/src/useSelect.ts
+++ b/packages/components/select-v2/src/useSelect.ts
@@ -4,16 +4,15 @@ import {
   ref,
   reactive,
   nextTick,
-  inject,
   onMounted,
   onBeforeMount,
 } from 'vue'
 import { isArray, isFunction, isObject } from '@vue/shared'
 import isEqual from 'lodash/isEqual'
 import lodashDebounce from 'lodash/debounce'
-import { elFormKey } from '@element-plus/tokens'
-import { useLocale, useSize } from '@element-plus/hooks'
+import { useFormItem, useLocale, useSize } from '@element-plus/hooks'
 import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
+import { ValidateComponentsMap } from '@element-plus/utils/icon'
 import {
   addResizeListener,
   removeResizeListener,
@@ -29,7 +28,6 @@ import { flattenOptions } from './util'
 import { useInput } from './useInput'
 import type { SelectProps } from './defaults'
 import type { ExtractPropTypes, CSSProperties } from 'vue'
-import type { ElFormContext } from '@element-plus/tokens'
 import type { OptionType, Option } from './select.types'
 
 const DEFAULT_INPUT_PLACEHOLDER = ''
@@ -42,7 +40,7 @@ const TAG_BASE_WIDTH = {
 const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
   // inject
   const { t } = useLocale()
-  const elForm = inject(elFormKey, {} as ElFormContext)
+  const { form: elForm, formItem: elFormItem } = useFormItem()
 
   const states = reactive({
     inputValue: DEFAULT_INPUT_PLACEHOLDER,
@@ -86,7 +84,7 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
   // the controller of the expanded popup
   const expanded = ref(false)
 
-  const selectDisabled = computed(() => props.disabled || elForm.disabled)
+  const selectDisabled = computed(() => props.disabled || elForm?.disabled)
 
   const popupHeight = computed(() => {
     const totalHeight = filteredOptions.value.length * 34
@@ -122,6 +120,11 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
     iconComponent.value && expanded.value ? 'is-reverse' : ''
   )
 
+  const validateState = computed(() => elFormItem?.validateState || '')
+  const validateIcon = computed(
+    () => ValidateComponentsMap[validateState.value]
+  )
+
   const debounce = computed(() => (props.remote ? 300 : 0))
 
   // filteredOptions includes flatten the data into one dimensional array.
@@ -696,10 +699,13 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
 
   watch(
     () => props.modelValue,
-    (val) => {
+    (val, oldVal) => {
       if (!val || val.toString() !== states.previousValue) {
         initStates()
       }
+      if (!isEqual(val, oldVal)) {
+        elFormItem?.validate?.('change')
+      }
     },
     {
       deep: true,
@@ -768,6 +774,9 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
 
     popperRef,
 
+    validateState,
+    validateIcon,
+
     Effect,
 
     // methods exports
diff --git a/packages/theme-chalk/src/form.scss b/packages/theme-chalk/src/form.scss
index 2ede2e7b01..bc76fe22c9 100644
--- a/packages/theme-chalk/src/form.scss
+++ b/packages/theme-chalk/src/form.scss
@@ -121,6 +121,7 @@
   }
 
   @include when(error) {
+    & .#{$namespace}-select-v2__wrapper,
     & .#{$namespace}-input__inner,
     & .#{$namespace}-textarea__inner {
       &,
diff --git a/packages/theme-chalk/src/select-v2.scss b/packages/theme-chalk/src/select-v2.scss
index d9a31f6e17..ce37766f51 100644
--- a/packages/theme-chalk/src/select-v2.scss
+++ b/packages/theme-chalk/src/select-v2.scss
@@ -196,11 +196,13 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
   }
 
   @include e(suffix) {
+    display: inline-flex;
     position: absolute;
-    right: 5px;
+    right: 12px;
     height: 40px;
     top: 50%;
     transform: translateY(-50%);
+    color: var(--el-input-icon-color, map.get($input, 'icon-color'));
   }
 
   @include e(caret) {