diff --git a/packages/components/popper/src/utils.ts b/packages/components/popper/src/utils.ts index 93fee1ffa5..9c3b810fd3 100644 --- a/packages/components/popper/src/utils.ts +++ b/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, }, }, }, diff --git a/packages/components/select-v2/src/select.vue b/packages/components/select-v2/src/select.vue index 0687db4294..d4801cced8 100644 --- a/packages/components/select-v2/src/select.vue +++ b/packages/components/select-v2/src/select.vue @@ -257,7 +257,7 @@ @@ -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, } }, }) diff --git a/packages/components/select/__tests__/select.test.ts b/packages/components/select/__tests__/select.test.ts index dbeca4b020..db92fba18a 100644 --- a/packages/components/select/__tests__/select.test.ts +++ b/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() }) diff --git a/packages/components/select/src/select-dropdown.vue b/packages/components/select/src/select-dropdown.vue index ecb972f4cb..682db1b2cf 100644 --- a/packages/components/select/src/select-dropdown.vue +++ b/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(() => { diff --git a/packages/constants/form.ts b/packages/constants/form.ts index 104ad0cbe5..536ed13f9b 100644 --- a/packages/constants/form.ts +++ b/packages/constants/form.ts @@ -1 +1,2 @@ export const MINIMUM_INPUT_WIDTH = 11 +export const BORDER_HORIZONTAL_WIDTH = 2