From e8817aae06a5616a91b64d3e19fc18a809c47bc3 Mon Sep 17 00:00:00 2001
From: Xc <124118265@qq.com>
Date: Tue, 6 Sep 2022 23:12:52 +0800
Subject: [PATCH] feat(components): [select] enhanced suffix (#9619)

* feat(components): [select] enhanced suffix

* docs: remove useless characters

* docs(components): [select] add remote suffix demo
---
 docs/en-US/component/select.md                | 32 ++++----
 docs/examples/select/remote-search.vue        | 80 +++++++++++++++----
 .../select/__tests__/select.test.ts           | 35 +++++++-
 packages/components/select/src/select.vue     | 20 +++--
 packages/components/select/src/useSelect.ts   |  9 ++-
 packages/theme-chalk/src/select.scss          |  6 +-
 6 files changed, 137 insertions(+), 45 deletions(-)

diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md
index 23f40d96a1..63868d0317 100644
--- a/docs/en-US/component/select.md
+++ b/docs/en-US/component/select.md
@@ -114,39 +114,41 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | Attribute                         | Description                                                                                                                 | Type                                       | Accepted Values                                                                                           | Default          |
 | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------- | ---------------- |
 | model-value / v-model             | binding value                                                                                                               | array / string / number / boolean / object | —                                                                                                         | —                |
-| multiple                          | whether multiple-select is activated                                                                                        | boolean                                    | —                                                                                                         | false            |
-| disabled                          | whether Select is disabled                                                                                                  | boolean                                    | —                                                                                                         | false            |
+| multiple                          | whether multiple-select is activated                                                                                        | boolean                                    | true / false                                                                                              | false            |
+| disabled                          | whether Select is disabled                                                                                                  | boolean                                    | true / false                                                                                              | false            |
 | value-key                         | unique identity key name for value, required when value is an object                                                        | string                                     | —                                                                                                         | value            |
 | size                              | size of Input                                                                                                               | string                                     | large/default/small                                                                                       | default          |
-| clearable                         | whether select can be cleared                                                                                               | boolean                                    | —                                                                                                         | false            |
-| collapse-tags                     | whether to collapse tags to a text when multiple selecting                                                                  | boolean                                    | —                                                                                                         | false            |
+| clearable                         | whether select can be cleared                                                                                               | boolean                                    | true / false                                                                                              | false            |
+| collapse-tags                     | whether to collapse tags to a text when multiple selecting                                                                  | boolean                                    | true / false                                                                                              | false            |
 | collapse-tags-tooltip             | whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true            | boolean                                    | true / false                                                                                              | false            |
 | multiple-limit                    | maximum number of options user can select when `multiple` is `true`. No limit when set to 0                                 | number                                     | —                                                                                                         | 0                |
 | name                              | the name attribute of select input                                                                                          | string                                     | —                                                                                                         | —                |
 | effect                            | Tooltip theme, built-in theme: `dark` / `light`                                                                             | string                                     | string                                                                                                    | light            |
 | autocomplete                      | the autocomplete attribute of select input                                                                                  | string                                     | —                                                                                                         | off              |
 | placeholder                       | placeholder                                                                                                                 | string                                     | —                                                                                                         | Select           |
-| filterable                        | whether Select is filterable                                                                                                | boolean                                    | —                                                                                                         | false            |
-| allow-create                      | whether creating new items is allowed. To use this, `filterable` must be true                                               | boolean                                    | —                                                                                                         | false            |
+| filterable                        | whether Select is filterable                                                                                                | boolean                                    | true / false                                                                                              | false            |
+| allow-create                      | whether creating new items is allowed. To use this, `filterable` must be true                                               | boolean                                    | true / false                                                                                              | false            |
 | filter-method                     | custom filter method                                                                                                        | function                                   | —                                                                                                         | —                |
-| remote                            | whether options are loaded from server                                                                                      | boolean                                    | —                                                                                                         | false            |
+| remote                            | whether options are loaded from server                                                                                      | boolean                                    | true / false                                                                                              | false            |
 | remote-method                     | custom remote search method                                                                                                 | function                                   | —                                                                                                         | —                |
-| loading                           | whether Select is loading data from server                                                                                  | boolean                                    | —                                                                                                         | false            |
+| remote-show-suffix                | in remote search method show suffix icon                                                                                    | boolean                                    | true / false                                                                                              | false            |
+| loading                           | whether Select is loading data from server                                                                                  | boolean                                    | true / false                                                                                              | false            |
 | loading-text                      | displayed text while loading data from server                                                                               | string                                     | —                                                                                                         | Loading          |
 | no-match-text                     | displayed text when no data matches the filtering query, you can also use slot `empty`                                      | string                                     | —                                                                                                         | No matching data |
 | no-data-text                      | displayed text when there is no options, you can also use slot `empty`                                                      | string                                     | —                                                                                                         | No data          |
 | popper-class                      | custom class name for Select's dropdown                                                                                     | string                                     | —                                                                                                         | —                |
-| reserve-keyword                   | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option                          | boolean                                    | —                                                                                                         | true             |
-| default-first-option              | select first matching option on enter key. Use with `filterable` or `remote`                                                | boolean                                    | -                                                                                                         | false            |
-| popper-append-to-body(deprecated) | 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             |
+| reserve-keyword                   | when `multiple` and `filter` is true, whether to reserve current keyword after selecting an option                          | boolean                                    | true / false                                                                                              | true             |
+| default-first-option              | select first matching option on enter key. Use with `filterable` or `remote`                                                | boolean                                    | true / false                                                                                              | false            |
+| popper-append-to-body(deprecated) | 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 / false                                                                                              | true             |
 | teleported                        | whether select dropdown is teleported to the body                                                                           | boolean                                    | true / false                                                                                              | true             |
 | persistent                        | when select dropdown is inactive and `persistent` is `false`, select dropdown will be destroyed                             | boolean                                    | true / false                                                                                              | true             |
-| automatic-dropdown                | for non-filterable Select, this prop decides if the option menu pops up when the input is focused                           | boolean                                    | -                                                                                                         | false            |
+| automatic-dropdown                | for non-filterable Select, this prop decides if the option menu pops up when the input is focused                           | boolean                                    | true / false                                                                                              | 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          |
+| fit-input-width                   | whether the width of the dropdown is the same as the input                                                                  | boolean                                    | true / false                                                                                              | false            |
+| suffix-icon                       | Custom suffix icon component                                                                                                | `string \| Component`                      | —                                                                                                         | ArrowDown        |
+| suffix-transition                 | animation when dropdown appears/disappears icon                                                                             | boolean                                    | true / false                                                                                              | true             |
 | tag-type                          | tag type                                                                                                                    | string                                     | success/info/warning/danger                                                                               | info             |
-| validate-event                    | whether to trigger form validation                                                                                          | boolean                                    | -                                                                                                         | true             |
+| validate-event                    | whether to trigger form validation                                                                                          | boolean                                    | true / false                                                                                              | true             |
 | placement                         | position of dropdown                                                                                                        | string                                     | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom-start     |
 
 ## Select Events
diff --git a/docs/examples/select/remote-search.vue b/docs/examples/select/remote-search.vue
index 465106bba7..9b3d50c3c6 100644
--- a/docs/examples/select/remote-search.vue
+++ b/docs/examples/select/remote-search.vue
@@ -1,21 +1,67 @@
 <template>
-  <el-select
-    v-model="value"
-    multiple
-    filterable
-    remote
-    reserve-keyword
-    placeholder="Please enter a keyword"
-    :remote-method="remoteMethod"
-    :loading="loading"
-  >
-    <el-option
-      v-for="item in options"
-      :key="item.value"
-      :label="item.label"
-      :value="item.value"
-    />
-  </el-select>
+  <div style="display: inline-block; margin-left: 20px">
+    <p style="margin-left: 10px">default</p>
+    <el-select
+      v-model="value"
+      multiple
+      filterable
+      remote
+      reserve-keyword
+      placeholder="Please enter a keyword"
+      :remote-method="remoteMethod"
+      :loading="loading"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </div>
+  <div style="display: inline-block; margin-left: 20px">
+    <p style="margin-left: 10px">use remote-show-suffix</p>
+    <el-select
+      v-model="value"
+      multiple
+      filterable
+      remote
+      reserve-keyword
+      placeholder="Please enter a keyword"
+      remote-show-suffix
+      :remote-method="remoteMethod"
+      :loading="loading"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </div>
+  <div style="display: inline-block; margin-left: 20px">
+    <p style="margin-left: 10px">disabled suffix-transition</p>
+    <el-select
+      v-model="value"
+      multiple
+      filterable
+      remote
+      reserve-keyword
+      placeholder="Please enter a keyword"
+      remote-show-suffix
+      :remote-method="remoteMethod"
+      :loading="loading"
+      :suffix-transition="false"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/packages/components/select/__tests__/select.test.ts b/packages/components/select/__tests__/select.test.ts
index 59fe20d1fc..6b627280e6 100644
--- a/packages/components/select/__tests__/select.test.ts
+++ b/packages/components/select/__tests__/select.test.ts
@@ -3,7 +3,7 @@ import { markRaw, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, test, vi } from 'vitest'
 import { EVENT_CODE } from '@element-plus/constants'
-import { ArrowUp, CaretTop, CircleClose } from '@element-plus/icons-vue'
+import { ArrowDown, CaretTop, CircleClose } from '@element-plus/icons-vue'
 import { POPPER_CONTAINER_SELECTOR } from '@element-plus/hooks'
 import { hasClass } from '@element-plus/utils'
 import { ElFormItem } from '@element-plus/components/form'
@@ -740,13 +740,44 @@ describe('Select', () => {
 
   test('suffix icon', async () => {
     wrapper = _mount(`<el-select></el-select>`)
-    let suffixIcon = wrapper.findComponent(ArrowUp)
+    let suffixIcon = wrapper.findComponent(ArrowDown)
     expect(suffixIcon.exists()).toBe(true)
     await wrapper.setProps({ suffixIcon: markRaw(CaretTop) })
     suffixIcon = wrapper.findComponent(CaretTop)
     expect(suffixIcon.exists()).toBe(true)
   })
 
+  test('test suffix transition', async () => {
+    wrapper = _mount(`<el-select></el-select>`)
+    expect(wrapper.find('.el-select__caret').classes()).not.toContain(
+      'is-reverse'
+    )
+    // open dropdown
+    wrapper.trigger('click')
+    await nextTick()
+    expect(wrapper.find('.el-select__caret').classes()).toContain('is-reverse')
+
+    await wrapper.setProps({ suffixTransition: false })
+
+    wrapper.trigger('click')
+    await nextTick()
+    expect(wrapper.find('.el-select__caret').classes()).not.toContain(
+      'is-reverse'
+    )
+  })
+
+  test('test remote show suffix', async () => {
+    wrapper = _mount(`<el-select></el-select>`)
+    await wrapper.setProps({
+      remote: true,
+      filters: true,
+      remoteShowSuffix: true,
+    })
+
+    const suffixIcon = wrapper.findComponent(ArrowDown)
+    expect(suffixIcon.exists()).toBe(true)
+  })
+
   test('fitInputWidth', async () => {
     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 7e849e40d9..6ff2be5723 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -281,14 +281,14 @@ import ElScrollbar from '@element-plus/components/scrollbar'
 import ElTag, { tagProps } from '@element-plus/components/tag'
 import ElIcon from '@element-plus/components/icon'
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { isValidComponentSize } from '@element-plus/utils'
-import { ArrowUp, CircleClose } from '@element-plus/icons-vue'
+import { iconPropType, isValidComponentSize } from '@element-plus/utils'
+import { ArrowDown, CircleClose } from '@element-plus/icons-vue'
 import ElOption from './option.vue'
 import ElSelectMenu from './select-dropdown.vue'
 import { useSelect, useSelectStates } from './useSelect'
 import { selectKey } from './token'
 
-import type { Component, PropType } from 'vue'
+import type { PropType } from 'vue'
 import type { ComponentSize } from '@element-plus/constants'
 import type { SelectContext } from './token'
 
@@ -369,7 +369,7 @@ export default defineComponent({
       default: true,
     },
     clearIcon: {
-      type: [String, Object] as PropType<string | Component>,
+      type: iconPropType,
       default: CircleClose,
     },
     fitInputWidth: {
@@ -377,8 +377,8 @@ export default defineComponent({
       default: false,
     },
     suffixIcon: {
-      type: [String, Object] as PropType<string | Component>,
-      default: ArrowUp,
+      type: iconPropType,
+      default: ArrowDown,
     },
     // eslint-disable-next-line vue/require-prop-types
     tagType: { ...tagProps.type, default: 'info' },
@@ -386,6 +386,14 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    remoteShowSuffix: {
+      type: Boolean,
+      default: false,
+    },
+    suffixTransition: {
+      type: Boolean,
+      default: true,
+    },
     placement: {
       type: String,
       values: placements,
diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts
index 65f43afceb..6670883c52 100644
--- a/packages/components/select/src/useSelect.ts
+++ b/packages/components/select/src/useSelect.ts
@@ -109,10 +109,15 @@ export const useSelect = (props, states: States, ctx) => {
     return criteria
   })
   const iconComponent = computed(() =>
-    props.remote && props.filterable ? '' : props.suffixIcon
+    props.remote && props.filterable && !props.remoteShowSuffix
+      ? ''
+      : props.suffixIcon
   )
   const iconReverse = computed(() =>
-    ns.is('reverse', iconComponent.value && states.visible)
+    ns.is(
+      'reverse',
+      iconComponent.value && states.visible && props.suffixTransition
+    )
   )
 
   const debounce = computed(() => (props.remote ? 300 : 0))
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index 8dec0eb60b..f496af959f 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -84,17 +84,17 @@
       color: getCssVar('select-input-color');
       font-size: getCssVar('select-input-font-size');
       transition: transform getCssVar('transition-duration');
-      transform: rotateZ(180deg);
+      transform: rotateZ(0deg);
       cursor: pointer;
 
       @include when(reverse) {
-        transform: rotateZ(0deg);
+        transform: rotateZ(-180deg);
       }
 
       @include when(show-close) {
         font-size: getCssVar('select-font-size');
         text-align: center;
-        transform: rotateZ(180deg);
+        transform: rotateZ(0deg);
         border-radius: getCssVar('border-radius-circle');
         color: getCssVar('select-input-color');
         transition: getCssVar('transition', 'color');