fix(components): [select] inner input height is inconsistent with select (#6979)

* fix(components): [select] inner input height is inconsistent with select

* Update packages/constants/size.ts

Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>

Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>

packages/components/select/src/select.vue

@@ -282,7 +282,11 @@ import ElScrollbar from '@element-plus/components/scrollbar'
 import ElTag, { tagProps } from '@element-plus/components/tag'
 import ElIcon from '@element-plus/components/icon'
 import { useDeprecateAppendToBody } from '@element-plus/components/popper'
-import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
+import {
+  CHANGE_EVENT,
+  UPDATE_MODEL_EVENT,
+  getComponentSize,
+} from '@element-plus/constants'
 import {
   addResizeListener,
   isValidComponentSize,
@@ -531,14 +535,10 @@ export default defineComponent({
       }
       addResizeListener(selectWrapper.value as any, handleResize)
       if (reference.value && reference.value.$el) {
-        const sizeMap = {
-          large: 36,
-          default: 32,
-          small: 28,
-        }
         const input = reference.value.input as HTMLInputElement
         states.initialInputHeight =
-          input.getBoundingClientRect().height || sizeMap[selectSize.value]
+          input.getBoundingClientRect().height ||
+          getComponentSize(selectSize.value)
       }
       if (props.remote && props.multiple) {
         resetInputHeight()

packages/components/select/src/useSelect.ts

@@ -15,6 +15,7 @@ import {
   CHANGE_EVENT,
   EVENT_CODE,
   UPDATE_MODEL_EVENT,
+  getComponentSize,
 } from '@element-plus/constants'
 import { debugWarn, isKorean, scrollIntoView } from '@element-plus/utils'
 import { useLocale, useNamespace, useSize } from '@element-plus/hooks'
@@ -333,7 +334,10 @@ export const useSelect = (props, states: States, ctx) => {
         (item) => (item as HTMLElement).tagName === 'INPUT'
       ) as HTMLInputElement
       const _tags = tags.value
-      const sizeInMap = states.initialInputHeight || 40
+
+      const sizeInMap =
+        states.initialInputHeight ||
+        getComponentSize(selectSize.value || elForm.size)
       input.style.height =
         states.selected.length === 0
           ? `${sizeInMap}px`

packages/constants/size.ts

@@ -1,2 +1,13 @@
 export const componentSizes = ['', 'default', 'small', 'large'] as const
+
 export type ComponentSize = typeof componentSizes[number]
+
+export const componentSizeMap = {
+  large: 40,
+  default: 32,
+  small: 24,
+} as const
+
+export const getComponentSize = (size: ComponentSize = 'default') => {
+  return componentSizeMap[size || 'default']
+}