fix(Select): should be able to not clear search value in multiple mode,

close alibaba-fusion#3590
FairyYang · Jul 1, 2024 · ab017bc · ab017bc
1 parent 83269e0
commit ab017bc
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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