fix(components): [select/v2] width of drop-down panel exceeds the input (#21910)

* fix(components): [select/V2] width of dropdown panel exceeds the input

* fix(components): [select/V2] width of drop-down panel exceeds the input

* fix: select constants

* fix: select

---------

Co-authored-by: 2586740555 <15972343+CYJ090915@user.noreply.gitee.com>

packages/components/popper/src/utils.ts

@@ -43,10 +43,10 @@ function genModifiers(options: PopperCoreConfigProps) {
       name: 'preventOverflow',
       options: {
         padding: {
-          top: 2,
-          bottom: 2,
-          left: 5,
-          right: 5,
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
         },
       },
     },

packages/components/select-v2/src/select.vue

@@ -257,7 +257,7 @@
         <el-select-menu
           ref="menuRef"
           :data="filteredOptions"
-          :width="popperSize"
+          :width="popperSize - BORDER_HORIZONTAL_WIDTH"
           :hovering-index="states.hoveringIndex"
           :scrollbar-always-on="scrollbarAlwaysOn"
         >
@@ -304,6 +304,7 @@ import ElSelectMenu from './select-dropdown'
 import useSelect from './useSelect'
 import { selectV2Emits, selectV2Props } from './defaults'
 import { selectV2InjectionKey } from './token'
+import { BORDER_HORIZONTAL_WIDTH } from '@element-plus/constants'
 
 export default defineComponent({
   name: 'ElSelectV2',
@@ -364,6 +365,7 @@ export default defineComponent({
       selectedLabel,
       calculatorRef,
       inputStyle,
+      BORDER_HORIZONTAL_WIDTH,
     }
   },
 })

packages/components/select/__tests__/select.test.ts

@@ -2,7 +2,7 @@
 import { defineComponent, markRaw, nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, test, vi } from 'vitest'
-import { EVENT_CODE } from '@element-plus/constants'
+import { BORDER_HORIZONTAL_WIDTH, EVENT_CODE } from '@element-plus/constants'
 import { ArrowDown, CaretTop, CircleClose } from '@element-plus/icons-vue'
 import { usePopperContainerId } from '@element-plus/hooks'
 import { hasClass } from '@element-plus/utils'
@@ -1128,10 +1128,10 @@ describe('Select', () => {
       .mockReturnValue(selectRect as DOMRect)
     const dropdown = wrapper.findComponent({ name: 'ElSelectDropdown' })
     dropdown.vm.minWidth = `${
-      selectRef.element.getBoundingClientRect().width
+      selectRef.element.getBoundingClientRect().width - BORDER_HORIZONTAL_WIDTH
     }px`
     await nextTick()
-    expect(dropdown.element.style.width).toBe('221px')
+    expect(dropdown.element.style.width).toBe('219px')
     mockSelectWidth.mockRestore()
   })
 

packages/components/select/src/select-dropdown.vue

@@ -18,6 +18,7 @@ import { computed, defineComponent, inject, onMounted, ref } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
 import { useNamespace } from '@element-plus/hooks'
 import { selectKey } from './token'
+import { BORDER_HORIZONTAL_WIDTH } from '@element-plus/constants'
 
 export default defineComponent({
   name: 'ElSelectDropdown',
@@ -35,7 +36,12 @@ export default defineComponent({
     const minWidth = ref('')
 
     function updateMinWidth() {
-      minWidth.value = `${select.selectRef?.offsetWidth}px`
+      const offsetWidth = select.selectRef?.offsetWidth
+      if (offsetWidth) {
+        minWidth.value = `${offsetWidth - BORDER_HORIZONTAL_WIDTH}px`
+      } else {
+        minWidth.value = ''
+      }
     }
 
     onMounted(() => {

packages/constants/form.ts

@@ -1 +1,2 @@
 export const MINIMUM_INPUT_WIDTH = 11
+export const BORDER_HORIZONTAL_WIDTH = 2