fix(components): [select-v2] status-icon position (#7835)

* fix(components): [select] status-icon position

* fix(components): [select-v2] status-icon position

* fix(components): [select-v2] status-icon position

docs/examples/form/validation.vue

@@ -6,6 +6,7 @@
     label-width="120px"
     class="demo-ruleForm"
     :size="formSize"
+    status-icon
   >
     <el-form-item label="Activity name" prop="name">
       <el-input v-model="ruleForm.name" />
@@ -16,6 +17,13 @@
         <el-option label="Zone two" value="beijing" />
       </el-select>
     </el-form-item>
+    <el-form-item label="Activity count" prop="count">
+      <el-select-v2
+        v-model="ruleForm.count"
+        placeholder="Activity count"
+        :options="options"
+      />
+    </el-form-item>
     <el-form-item label="Activity time" required>
       <el-col :span="11">
         <el-form-item prop="date1">
@@ -80,6 +88,7 @@ const ruleFormRef = ref<FormInstance>()
 const ruleForm = reactive({
   name: 'Hello',
   region: '',
+  count: '',
   date1: '',
   date2: '',
   delivery: false,
@@ -100,6 +109,13 @@ const rules = reactive<FormRules>({
       trigger: 'change',
     },
   ],
+  count: [
+    {
+      required: true,
+      message: 'Please select Activity count',
+      trigger: 'change',
+    },
+  ],
   date1: [
     {
       type: 'date',
@@ -151,4 +167,9 @@ const resetForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.resetFields()
 }
+
+const options = Array.from({ length: 10000 }).map((_, idx) => ({
+  value: `${idx + 1}`,
+  label: `${idx + 1}`,
+}))
 </script>

packages/theme-chalk/src/select-v2.scss

@@ -217,6 +217,10 @@ $input-inline-start: map.get($input-padding-horizontal, 'default') !default;
       #{getCssVarName('input-icon-color')},
       map.get($input, 'icon-color')
     );
+
+    .#{$namespace}-input__icon {
+      height: inherit;
+    }
   }
 
   @include e(caret) {