From 87a06ddcdfa1ea4d2952c564cefc67ca1e1337c4 Mon Sep 17 00:00:00 2001
From: "C.Y.Kun" <30518686+undefined-degisn@users.noreply.github.com>
Date: Fri, 12 Nov 2021 14:27:51 +0800
Subject: [PATCH] feat(components): [el-select] support suffix-icon (#4364)

---
 docs/en-US/component/select.md                      |  1 +
 packages/components/select/__tests__/select.spec.ts | 11 ++++++++++-
 packages/components/select/src/select.vue           |  6 +++++-
 packages/components/select/src/useSelect.ts         |  3 +--
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md
index ddae25cff1..22e6320b2c 100644
--- a/docs/en-US/component/select.md
+++ b/docs/en-US/component/select.md
@@ -146,6 +146,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | 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            |
+| suffix-icon           | Custom suffix icon component                                                                                                | string / Component                 | —                       | ArrowUp          |
 
 ## Select Events
 
diff --git a/packages/components/select/__tests__/select.spec.ts b/packages/components/select/__tests__/select.spec.ts
index 06420fe5ae..33356f45cc 100644
--- a/packages/components/select/__tests__/select.spec.ts
+++ b/packages/components/select/__tests__/select.spec.ts
@@ -2,7 +2,7 @@ import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { sleep } from '@element-plus/test-utils'
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { CircleClose } from '@element-plus/icons'
+import { CircleClose, ArrowUp, CaretTop } from '@element-plus/icons'
 import Select from '../src/select.vue'
 import Group from '../src/option-group.vue'
 import Option from '../src/option.vue'
@@ -540,6 +540,15 @@ describe('Select', () => {
     expect(vm.value).toBe('')
   })
 
+  test('suffix icon', async () => {
+    const wrapper = _mount(`<el-select></el-select>`)
+    let suffixIcon = wrapper.findComponent(ArrowUp)
+    expect(suffixIcon.exists()).toBe(true)
+    await wrapper.setProps({ suffixIcon: CaretTop })
+    suffixIcon = wrapper.findComponent(CaretTop)
+    expect(suffixIcon.exists()).toBe(true)
+  })
+
   test('fitInputWidth', async () => {
     const wrapper = getSelectVm({ fitInputWidth: true })
     const selectWrapper = wrapper.findComponent({ name: 'ElSelect' })
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index dc294ec92c..bf5c56ec6e 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -234,7 +234,7 @@ import {
   removeResizeListener,
 } from '@element-plus/utils/resize-event'
 import { isValidComponentSize } from '@element-plus/utils/validators'
-import { CircleClose } from '@element-plus/icons'
+import { CircleClose, ArrowUp } from '@element-plus/icons'
 import ElOption from './option.vue'
 import ElSelectMenu from './select-dropdown.vue'
 import { useSelect, useSelectStates } from './useSelect'
@@ -315,6 +315,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    suffixIcon: {
+      type: [String, Object] as PropType<string | Component>,
+      default: ArrowUp,
+    },
   },
   emits: [
     UPDATE_MODEL_EVENT,
diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts
index 92c797759d..719dedd92b 100644
--- a/packages/components/select/src/useSelect.ts
+++ b/packages/components/select/src/useSelect.ts
@@ -19,7 +19,6 @@ import scrollIntoView from '@element-plus/utils/scroll-into-view'
 import { isKorean } from '@element-plus/utils/isDef'
 import { getValueByPath, useGlobalConfig } from '@element-plus/utils/util'
 import { elFormKey, elFormItemKey } from '@element-plus/tokens'
-import { ArrowUp } from '@element-plus/icons'
 
 import type { QueryChangeCtx, SelectOptionProxy } from './token'
 import type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'
@@ -96,7 +95,7 @@ export const useSelect = (props, states: States, ctx) => {
     return criteria
   })
   const iconComponent = computed(() =>
-    props.remote && props.filterable ? '' : ArrowUp
+    props.remote && props.filterable ? '' : props.suffixIcon
   )
   const iconReverse = computed(() =>
     iconComponent.value && states.visible ? 'is-reverse' : ''