feat(components): [autocomplete] fit input width (#8596)

* feat(components): [autocomplete] Add fitInputWidth prop

* feat(components): [autocomplete]

* feat: add docs

* feat(components): [autocomplete]

docs/en-US/component/autocomplete.md

@@ -54,9 +54,10 @@ autocomplete/remote-search
 | prefix-icon                       | prefix icon class                                                                                                          | string / Component              | —                                                              | —            |
 | suffix-icon                       | suffix icon class                                                                                                          | string / Component              | —                                                              | —            |
 | hide-loading                      | whether to hide the loading icon in remote search                                                                          | boolean                         | —                                                              | false        |
-| popper-append-to-body(deprecated) | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | boolean                         | -                                                              | false        |
+| popper-append-to-body(deprecated) | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | boolean                         | —                                                              | false        |
 | teleported                        | whether select dropdown is teleported to the body                                                                          | boolean                         | true / false                                                   | true         |
 | highlight-first-item              | whether to highlight first item in remote search suggestions by default                                                    | boolean                         | —                                                              | false        |
+| fit-input-width                   | whether the width of the dropdown is the same as the input                                                                 | boolean                         | —                                                              | false        |
 
 ## Autocomplete Slots
 

packages/components/autocomplete/__tests__/autocomplete.test.tsx

@@ -289,6 +289,32 @@ describe('Autocomplete.vue', () => {
     expect(document.body.querySelector('.highlighted')).toBeDefined()
   })
 
+  test('fitInputWidth', async () => {
+    const wrapper = _mount({
+      fitInputWidth: true,
+    })
+    await nextTick()
+
+    const inputDom = wrapper.find('.el-input').element
+    const mockInputWidth = vi
+      .spyOn(inputDom as HTMLElement, 'offsetWidth', 'get')
+      .mockReturnValue(200)
+    await wrapper.find('input').trigger('focus')
+    vi.runAllTimers()
+    await nextTick()
+    await nextTick()
+    await nextTick()
+
+    expect(
+      (
+        document.body.querySelector(
+          '.el-autocomplete-suggestion'
+        ) as HTMLElement
+      ).style.width
+    ).toBe('200px')
+    mockInputWidth.mockRestore()
+  })
+
   describe('teleported API', () => {
     it('should mount on popper container', async () => {
       expect(document.body.innerHTML).toBe('')

packages/components/autocomplete/src/autocomplete.ts

@@ -81,6 +81,10 @@ export const autocompleteProps = buildProps({
     type: Boolean,
     default: false,
   },
+  fitInputWidth: {
+    type: Boolean,
+    default: false,
+  },
 } as const)
 export type AutocompleteProps = ExtractPropTypes<typeof autocompleteProps>
 

packages/components/autocomplete/src/autocomplete.vue

@@ -60,7 +60,10 @@
       <div
         ref="regionRef"
         :class="[ns.b('suggestion'), ns.is('loading', suggestionLoading)]"
-        :style="{ minWidth: dropdownWidth, outline: 'none' }"
+        :style="{
+          [fitInputWidth ? 'width' : 'minWidth']: dropdownWidth,
+          outline: 'none',
+        }"
         role="region"
       >
         <el-scrollbar