diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md index d2093b4512..ddae25cff1 100644 --- a/docs/en-US/component/select.md +++ b/docs/en-US/component/select.md @@ -145,6 +145,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as | popper-append-to-body | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false | boolean | - | true | | automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false | | clear-icon | Custom clear icon component | string / Component | — | CircleClose | +| fit-input-width | whether the width of the dropdown is the same as the input | boolean | — | false | ## Select Events diff --git a/packages/components/select/__tests__/select.spec.ts b/packages/components/select/__tests__/select.spec.ts index 50d913f813..06420fe5ae 100644 --- a/packages/components/select/__tests__/select.spec.ts +++ b/packages/components/select/__tests__/select.spec.ts @@ -22,6 +22,7 @@ interface SelectProps { multipleLimit?: number popperClass?: string defaultFirstOption?: boolean + fitInputWidth?: boolean } const _mount = (template: string, data: any = () => ({}), otherObj?) => @@ -59,6 +60,7 @@ const getSelectVm = (configs: SelectProps = {}, options?) => { 'remote', 'collapseTags', 'automaticDropdown', + 'fitInputWidth', ].forEach((config) => { configs[config] = configs[config] || false }) @@ -110,7 +112,8 @@ const getSelectVm = (configs: SelectProps = {}, options?) => { :remote="remote" :loading="loading" :remoteMethod="remoteMethod" - :automatic-dropdown="automaticDropdown"> + :automatic-dropdown="automaticDropdown" + :fit-input-width="fitInputWidth"> { allowCreate: configs.allowCreate, popperClass: configs.popperClass, automaticDropdown: configs.automaticDropdown, + fitInputWidth: configs.fitInputWidth, loading: false, filterMethod: configs.filterMethod, remote: configs.remote, @@ -149,6 +153,7 @@ const getGroupSelectVm = (configs: SelectProps = {}, options?) => { 'remote', 'collapseTags', 'automaticDropdown', + 'fitInputWidth', ].forEach((config) => { configs[config] = configs[config] || false }) @@ -238,7 +243,8 @@ const getGroupSelectVm = (configs: SelectProps = {}, options?) => { :remote="remote" :loading="loading" :remoteMethod="remoteMethod" - :automatic-dropdown="automaticDropdown"> + :automatic-dropdown="automaticDropdown" + :fit-input-width="fitInputWidth"> { expect(vm.value).toBe('') }) + test('fitInputWidth', async () => { + const wrapper = getSelectVm({ fitInputWidth: true }) + const selectWrapper = wrapper.findComponent({ name: 'ElSelect' }) + const selectDom = selectWrapper.element + const selectRect = { + height: 40, + width: 221, + x: 44, + y: 8, + top: 8, + } + const mockSelectWidth = jest + .spyOn(selectDom, 'getBoundingClientRect') + .mockReturnValue(selectRect as DOMRect) + const dropdown = wrapper.findComponent({ name: 'ElSelectDropdown' }) + dropdown.vm.minWidth = `${ + selectWrapper.element.getBoundingClientRect().width + }px` + await nextTick() + expect(dropdown.element.style.width).toBe('221px') + mockSelectWidth.mockRestore() + }) + test('check default first option', async () => { const wrapper = getSelectVm({ filterable: true, diff --git a/packages/components/select/src/select-dropdown.vue b/packages/components/select/src/select-dropdown.vue index 7a36be8d3e..3e0a28362f 100644 --- a/packages/components/select/src/select-dropdown.vue +++ b/packages/components/select/src/select-dropdown.vue @@ -2,7 +2,7 @@
@@ -35,6 +35,7 @@ export default defineComponent({ // computed const popperClass = computed(() => select.props.popperClass) const isMultiple = computed(() => select.props.multiple) + const isFitInputWidth = computed(() => select.props.fitInputWidth) const minWidth = ref('') function updateMinWidth() { @@ -64,6 +65,7 @@ export default defineComponent({ minWidth, popperClass, isMultiple, + isFitInputWidth, } }, }) diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue index f6571e549f..676ec34b18 100644 --- a/packages/components/select/src/select.vue +++ b/packages/components/select/src/select.vue @@ -307,6 +307,10 @@ export default defineComponent({ type: [String, Object] as PropType, default: CircleClose, }, + fitInputWidth: { + type: Boolean, + default: false, + }, }, emits: [ UPDATE_MODEL_EVENT,