From 4f9f27d40dc16bdd80f2ec6e41016ab7f70a50d1 Mon Sep 17 00:00:00 2001
From: Alan Wang <wp_scut@163.com>
Date: Tue, 18 Jan 2022 11:24:54 +0800
Subject: [PATCH] feat: [el-select-v2]add reserve-keyword and change docs
 (#5308)

* feat: [el-select-v2]add reserve-keyword and change docs

* fix(components): [el-select-v2]add test case
---
 docs/en-US/component/select-v2.md             | 79 ++++++++++---------
 docs/examples/select-v2/allow-create.vue      | 59 +++++++++-----
 .../select-v2/__tests__/select.spec.ts        | 66 ++++++++++++++++
 packages/components/select-v2/src/defaults.ts |  5 +-
 .../components/select-v2/src/useSelect.ts     |  2 +-
 5 files changed, 153 insertions(+), 58 deletions(-)

diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md
index b0c27dff2a..10d46ddb75 100644
--- a/docs/en-US/component/select-v2.md
+++ b/docs/en-US/component/select-v2.md
@@ -98,7 +98,15 @@ select-v2/clearable
 
 Create and select new items that are not included in select options
 
-:::demo By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`.
+By using the `allow-create` attribute, users can create new items by typing in the input box. Note that for `allow-create` to work, `filterable` must be `true`.
+
+:::tip
+
+It will be better to set `:reserve-keyword="false"` when use `allow-create`
+
+:::
+
+:::demo
 
 select-v2/allow-create
 
@@ -116,39 +124,37 @@ select-v2/remote-search
 
 ## SelectV2 Attributes
 
-| Param                 | Description                                                                                                                 | Type                               | Accepted Values     | Default       |
-| --------------------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------- | ------------- |
-| model-value / v-model | biding value                                                                                                                | string / number / boolean / object | —                   | —             |
-| multiple              | is multiple                                                                                                                 | boolean                            | —                   | false         |
-| disabled              | is disabled                                                                                                                 | boolean                            | —                   | false         |
-| value-key             | unique identity key name for value, required when value is an object                                                        | string                             | —                   | value         |
-| size                  | input box size                                                                                                              | 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         |
-| 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                             | —                   | —             |
-| autocomplete          | select input 的 autocomplete 属性                                                                                           | string                             | —                   | off           |
-| placeholder           | the autocomplete attribute of select input                                                                                  | string                             | —                   | Please select |
-| filterable            | is filterable                                                                                                               | boolean                            | —                   | false         |
-| allow-create          | whether creating new items is allowed. To use this, `filterable` must be true                                               | boolean                            | —                   | false         |
-| 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                             | —                   | —             |
-| 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                            | -                   | false         |
-| popper-options        | Customized popper option see more at [popper.js](https://popper.js.org/documentation.html)                                  | object                             | -                   | -             |
-| automatic-dropdown    | for non-filterable Select, this prop decides if the option menu pops up when the input is focused                           | boolean                            | -                   | false         |
-| clear-icon            | Customized clear icon component                                                                                             | string / Component                 | —                   | CircleClose   |
-| height                | The height of the dropdown panel, 34px for each item                                                                        | number                             | -                   | 170           |
-| scrollbar-always-on   | Controls whether the scrollbar is always displayed                                                                          | boolean                            | -                   | false         |
+| Param                 | Description                                                                                                                              | Type                               | Accepted Values     | Default       |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------- | ------------- |
+| model-value / v-model | biding value                                                                                                                             | string / number / boolean / object | —                   | —             |
+| multiple              | is multiple                                                                                                                              | boolean                            | —                   | false         |
+| disabled              | is disabled                                                                                                                              | boolean                            | —                   | false         |
+| value-key             | unique identity key name for value, required when value is an object                                                                     | string                             | —                   | value         |
+| size                  | input box size                                                                                                                           | string                             | large/default/small | default       |
+| clearable             | whether select can be cleared                                                                                                            | boolean                            | —                   | false         |
+| clear-icon            | custom clear icon                                                                                                                        | string / component                 | —                   | CircleClose   |
+| collapse-tags         | whether to collapse tags to a text when multiple selecting                                                                               | boolean                            | —                   | 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                             | —                   | —             |
+| autocomplete          | autocomplete of select input                                                                                                             | string                             | —                   | off           |
+| placeholder           | the autocomplete attribute of select input                                                                                               | string                             | —                   | Please select |
+| filterable            | is filterable                                                                                                                            | boolean                            | —                   | false         |
+| allow-create          | whether creating new items is allowed. To use this, `filterable` must be true                                                            | boolean                            | —                   | false         |
+| reserve-keyword       | whether reserve the keyword after select filtered option.                                                                                | boolean                            | —                   | true          |
+| 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                             | —                   | —             |
+| 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                            | -                   | false         |
+| popper-options        | Customized popper option see more at [popper.js](https://popper.js.org/documentation.html)                                               | object                             | -                   | -             |
+| automatic-dropdown    | for non-filterable Select, this prop decides if the option menu pops up when the input is focused                                        | boolean                            | -                   | false         |
+| clear-icon            | Customized clear icon component                                                                                                          | string / Component                 | —                   | CircleClose   |
+| height                | The height of the dropdown panel, 34px for each item                                                                                     | number                             | -                   | 170           |
+| scrollbar-always-on   | Controls whether the scrollbar is always displayed                                                                                       | boolean                            | -                   | false         |
+| remote                | whether search data from server                                                                                                          | boolean                            | —                   | false         |
+| remote-method         | function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true | function(keyword: string)          | —                   | —             |
 
 <span style="display: none;">
-<!-- | no-match-text | 搜索条件无匹配时显示的文字，也可以使用`#empty`设置 | string | — | 无匹配数据 | -->
-<!-- | reserve-keyword | 多选且可搜索时，是否在选中一个Option后保留当前的搜索关键词 | boolean | — | false |
-| default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
-| clear-icon | 自定义清空图标的类名 | string / component | — | CircleClose |
-| allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false |
+<!-- | default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |
 | filter-method | 自定义搜索方法 | function | — | — |
-| remote | 是否为远程搜索 | boolean | — | false |
-| remote-method | 远程搜索方法 | function | — | — |
 | loading | 是否正在从远程获取数据 | boolean | — | false |
 | loading-text | 远程加载时显示的文字 | string | — | 加载中 | -->
 </span>
@@ -166,9 +172,8 @@ select-v2/remote-search
 
 ## SelectV2 Slots
 
-| name    | 说明               |
-| ------- | ------------------ |
-| default | Option renderer    |
-| empty   | 无 Option 时的列表 |
-
-<!-- | prefix  | Select 组件头部内容 | -->
+| name    | Description                   |
+| ------- | ----------------------------- |
+| default | Option renderer               |
+| empty   | content when options is empty |
+| prefix  | prefix content of input       |
diff --git a/docs/examples/select-v2/allow-create.vue b/docs/examples/select-v2/allow-create.vue
index 02f3a45ace..6a69b5a65a 100644
--- a/docs/examples/select-v2/allow-create.vue
+++ b/docs/examples/select-v2/allow-create.vue
@@ -1,23 +1,43 @@
 <template>
-  <el-select-v2
-    v-model="value1"
-    :options="options"
-    placeholder="Please select"
-    style="width: 240px; margin-right: 16px; vertical-align: middle"
-    allow-create
-    filterable
-    multiple
-    clearable
-  />
-  <el-select-v2
-    v-model="value2"
-    :options="options"
-    placeholder="Please select"
-    style="width: 240px; vertical-align: middle"
-    allow-create
-    filterable
-    clearable
-  />
+  <div style="flex: auto">
+    <div>
+      <el-select-v2
+        v-model="value1"
+        :options="options"
+        placeholder="Please select"
+        style="width: 240px; margin-right: 16px; vertical-align: middle"
+        allow-create
+        filterable
+        multiple
+        clearable
+      />
+      <el-select-v2
+        v-model="value2"
+        :options="options"
+        placeholder="Please select"
+        style="width: 240px; vertical-align: middle"
+        allow-create
+        filterable
+        clearable
+      />
+    </div>
+    <div>
+      <p style="margin-top: 20px; margin-bottom: 8px">
+        set reserve-keyword false
+      </p>
+      <el-select-v2
+        v-model="value3"
+        :options="options"
+        placeholder="Please select"
+        style="width: 240px; margin-right: 16px; vertical-align: middle"
+        allow-create
+        filterable
+        multiple
+        clearable
+        :reserve-keyword="false"
+      />
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -26,6 +46,7 @@ const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
 
 const value1 = ref([])
 const value2 = ref('')
+const value3 = ref([])
 const options = Array.from({ length: 1000 }).map((_, idx) => ({
   value: `Option ${idx + 1}`,
   label: `${initials[idx % 10]}${idx}`,
diff --git a/packages/components/select-v2/__tests__/select.spec.ts b/packages/components/select-v2/__tests__/select.spec.ts
index 8def8a74db..2cb0922822 100644
--- a/packages/components/select-v2/__tests__/select.spec.ts
+++ b/packages/components/select-v2/__tests__/select.spec.ts
@@ -95,6 +95,7 @@ const createSelect = (
         :placeholder="placeholder"
         :allow-create="allowCreate"
         :remote="remote"
+        :reserve-keyword="reserveKeyword"
         :scrollbar-always-on="scrollbarAlwaysOn"
         ${
           options.methods && options.methods.filterMethod
@@ -129,6 +130,7 @@ const createSelect = (
           multiple: false,
           remote: false,
           filterable: false,
+          reserveKeyword: false,
           multipleLimit: 0,
           popperAppendToBody: true,
           placeholder: DEFAULT_PLACEHOLDER,
@@ -738,6 +740,70 @@ describe('Select', () => {
     })
   })
 
+  it('reserve-keyword', async () => {
+    const wrapper = createSelect({
+      data: () => {
+        return {
+          filterable: true,
+          clearable: true,
+          multiple: true,
+          reserveKeyword: true,
+          options: [
+            {
+              value: 'a1',
+              label: 'a1',
+            },
+            {
+              value: 'b1',
+              label: 'b1',
+            },
+            {
+              value: 'a2',
+              label: 'a2',
+            },
+            {
+              value: 'b2',
+              label: 'b2',
+            },
+          ],
+        }
+      },
+    })
+    await nextTick()
+    const vm = wrapper.vm as any
+    await nextTick()
+    await wrapper.trigger('click')
+    const input = wrapper.find('input')
+
+    input.element.value = 'a'
+    await input.trigger('input')
+    await nextTick()
+    let options = getOptions()
+    expect(options.length).toBe(2)
+    options[0].click()
+    await nextTick()
+    options = getOptions()
+    expect(options.length).toBe(2)
+
+    input.element.value = ''
+    await input.trigger('input')
+    await nextTick()
+    options = getOptions()
+    expect(options.length).toBe(4)
+
+    vm.reserveKeyword = false
+    await nextTick()
+    input.element.value = 'a'
+    await input.trigger('input')
+    await nextTick()
+    options = getOptions()
+    expect(options.length).toBe(2)
+    options[0].click()
+    await nextTick()
+    options = getOptions()
+    expect(options.length).toBe(4)
+  })
+
   it('render empty slot', async () => {
     const wrapper = createSelect({
       data() {
diff --git a/packages/components/select-v2/src/defaults.ts b/packages/components/select-v2/src/defaults.ts
index a51243bebb..b56126d6bc 100644
--- a/packages/components/select-v2/src/defaults.ts
+++ b/packages/components/select-v2/src/defaults.ts
@@ -51,7 +51,10 @@ export const SelectProps = {
   noDataText: String,
   noMatchText: String,
   remoteMethod: Function,
-  reserveKeyword: Boolean,
+  reserveKeyword: {
+    type: Boolean,
+    default: true,
+  },
   options: {
     type: Array as PropType<OptionType[]>,
     required: true,
diff --git a/packages/components/select-v2/src/useSelect.ts b/packages/components/select-v2/src/useSelect.ts
index 5d62bf5c34..028aaf59c0 100644
--- a/packages/components/select-v2/src/useSelect.ts
+++ b/packages/components/select-v2/src/useSelect.ts
@@ -414,7 +414,7 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
         handleQueryChange('')
         states.inputLength = 20
       }
-      if (props.filterable) {
+      if (props.filterable && !props.reserveKeyword) {
         inputRef.value.focus?.()
         onUpdateInputValue('')
       }