From ae96aedf3c5042f7c076b94f7d151deb09e327dc Mon Sep 17 00:00:00 2001
From: kooriookami <38392315+kooriookami@users.noreply.github.com>
Date: Sun, 3 Jul 2022 17:54:40 +0800
Subject: [PATCH] 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          |  3 ++-
 .../__tests__/autocomplete.test.tsx           | 26 +++++++++++++++++++
 .../autocomplete/src/autocomplete.ts          |  4 +++
 .../autocomplete/src/autocomplete.vue         |  5 +++-
 4 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/docs/en-US/component/autocomplete.md b/docs/en-US/component/autocomplete.md
index d35bc2f9cb..37a4ece574 100644
--- a/docs/en-US/component/autocomplete.md
+++ b/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
 
diff --git a/packages/components/autocomplete/__tests__/autocomplete.test.tsx b/packages/components/autocomplete/__tests__/autocomplete.test.tsx
index 89445a27b4..545713b74d 100644
--- a/packages/components/autocomplete/__tests__/autocomplete.test.tsx
+++ b/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('')
diff --git a/packages/components/autocomplete/src/autocomplete.ts b/packages/components/autocomplete/src/autocomplete.ts
index bc44fcd6a2..33e8be4791 100644
--- a/packages/components/autocomplete/src/autocomplete.ts
+++ b/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>
 
diff --git a/packages/components/autocomplete/src/autocomplete.vue b/packages/components/autocomplete/src/autocomplete.vue
index b5ba1052c0..f3814048af 100644
--- a/packages/components/autocomplete/src/autocomplete.vue
+++ b/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