From ab017bc1358ca7cee2b1dfba92ecda3a4dbca9dd Mon Sep 17 00:00:00 2001
From: FairyYang <269291280@qq.com>
Date: Fri, 28 Jun 2024 14:42:57 +0800
Subject: [PATCH] fix(Select): should be able to not clear search value in
 multiple mode, close #3590

---
 components/select/__tests__/issue-spec.tsx | 42 ++++++++++++++++++++++
 components/select/select.tsx               | 11 ++++--
 components/select/types.ts                 |  7 ++++
 3 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/components/select/__tests__/issue-spec.tsx b/components/select/__tests__/issue-spec.tsx
index 969b4c82c5..d007addaa7 100644
--- a/components/select/__tests__/issue-spec.tsx
+++ b/components/select/__tests__/issue-spec.tsx
@@ -59,4 +59,46 @@ describe('issue in AutoComplete', () => {
         cy.get('.next-select input').type('t');
         cy.get('.next-menu-item').should('have.length', 1);
     });
+
+    it('should be able to select multiple options while enable option filtering with keyword input in multi-select mode', () => {
+        const dataSource = [
+            { value: '10001', label: 'Lucy King' },
+            { value: '10002', label: 'Ami Lucky' },
+            { value: '10003', label: 'Tom Cat' },
+            { value: '10003', label: 'Serge Cat' },
+        ];
+
+        cy.mount(
+            <Select
+                dataSource={dataSource}
+                filterLocal
+                hiddenSelected={false}
+                mode="multiple"
+                showSearch
+                style={{ width: '300px' }}
+                autoClearSearchValue={false}
+            />
+        );
+        cy.get('.next-select input').type('l');
+        cy.get('.next-menu-item').should('have.length', 2);
+        cy.get('.next-menu-item').eq(1).click();
+        cy.get('.next-menu-item').should('have.length', 2);
+
+        // Tag mode 时，也应该支持
+        cy.mount(
+            <Select
+                dataSource={dataSource}
+                filterLocal
+                hiddenSelected={false}
+                mode="tag"
+                showSearch
+                style={{ width: '300px' }}
+                autoClearSearchValue={false}
+            />
+        );
+        cy.get('.next-select input').type('l');
+        cy.get('.next-menu-item').should('have.length', 3);
+        cy.get('.next-menu-item').eq(1).click();
+        cy.get('.next-menu-item').should('have.length', 3);
+    });
 });
diff --git a/components/select/select.tsx b/components/select/select.tsx
index 062c75aca2..c29184533a 100644
--- a/components/select/select.tsx
+++ b/components/select/select.tsx
@@ -94,6 +94,7 @@ class Select extends Base<SelectProps, SelectState> {
         locale: PropTypes.object,
         popupAutoFocus: PropTypes.bool,
         showDataSourceChildren: PropTypes.bool,
+        autoClearSearchValue: PropTypes.bool,
     };
 
     static defaultProps: SelectProps = {
@@ -119,6 +120,7 @@ class Select extends Base<SelectProps, SelectState> {
         onMouseLeave: noop,
         popupAutoFocus: false,
         tagClosable: true,
+        autoClearSearchValue: true,
     };
 
     static displayName = 'Select';
@@ -393,7 +395,7 @@ class Select extends Base<SelectProps, SelectState> {
             this.dataStore.getMapDS()
         );
 
-        const { cacheValue, mode, hiddenSelected } = this.props;
+        const { cacheValue, mode, hiddenSelected, autoClearSearchValue } = this.props;
 
         // cache those value maybe not exists in dataSource
         if (cacheValue || mode === 'tag') {
@@ -421,7 +423,12 @@ class Select extends Base<SelectProps, SelectState> {
         this.updateSelectAllYet(itemObj.value);
 
         // 清空搜索
-        if (!('searchValue' in this.props) && this.state.searchValue && !keepSearchValue) {
+        if (
+            !('searchValue' in this.props) &&
+            this.state.searchValue &&
+            !keepSearchValue &&
+            !(mode && ['multiple', 'tag'].includes(mode) && !autoClearSearchValue)
+        ) {
             // 因为 SearchValue 被 clear 后会重新渲染 Menu，所以在 Overlay 检测 safeNode 的时候 e.target 可能会找不到导致弹窗关闭
             setTimeout(() => {
                 this.handleSearchClear(triggerType);
diff --git a/components/select/types.ts b/components/select/types.ts
index 69fbbb64d5..e99f898b78 100644
--- a/components/select/types.ts
+++ b/components/select/types.ts
@@ -592,6 +592,13 @@ export interface SelectProps
      */
     showSearch?: boolean;
 
+    /**
+     * 是否在选中项后清空搜索框，只在 mode 为 multiple 或 tags 时有效
+     * @en Whether to clear the search box after selecting the selected item, only in mode multiple or tags is valid
+     * @defaultValue true
+     */
+    autoClearSearchValue?: boolean;
+
     /**
      * 当搜索框值变化时回调
      * @en Callback when the search box value changes