feat: add fit-input-width prop (#4088)

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
 

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">
       <el-option
         v-for="item in options"
         :label="item.label"
@@ -131,6 +134,7 @@ const getSelectVm = (configs: SelectProps = {}, options?) => {
       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">
       <el-group-option
         v-for="group in options"
         :key="group.label"
@@ -266,6 +272,7 @@ components: { ElOptionGroup }
       allowCreate: configs.allowCreate,
       popperClass: configs.popperClass,
       automaticDropdown: configs.automaticDropdown,
+      fitInputWidth: configs.fitInputWidth,
       loading: false,
       filterMethod: configs.filterMethod,
       remote: configs.remote,
@@ -533,6 +540,29 @@ describe('Select', () => {
     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,

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

@@ -2,7 +2,7 @@
   <div
     class="el-select-dropdown"
     :class="[{ 'is-multiple': isMultiple }, popperClass]"
-    :style="{ minWidth: minWidth }"
+    :style="{ [isFitInputWidth ? 'width' : 'minWidth']: minWidth }"
   >
     <slot></slot>
   </div>
@@ -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,
     }
   },
 })

packages/components/select/src/select.vue

@@ -307,6 +307,10 @@ export default defineComponent({
       type: [String, Object] as PropType<string | Component>,
       default: CircleClose,
     },
+    fitInputWidth: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: [
     UPDATE_MODEL_EVENT,