fix(Search): press enter will call onSearch once when autoHighlightFi…

…rstItem=false, close #4049
alibaba-fusion · Nov 15, 2023 · 659ba46 · 659ba46
1 parent ab0314e
commit 659ba46
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 17 deletions.
diff --git a/src/search/Search.jsx b/src/search/Search.jsx
@@ -218,7 +218,9 @@ class Search extends React.Component {
     };
 
     onPressEnter = () => {
-        if (this.highlightKey) {
+        // when autoHighlightFirstItem = false, onToggleHighlightItem will not trigger, cause this.highlightKey is empty
+        // and trigger onSearch twice
+        if (this.highlightKey || !this.props.autoHighlightFirstItem) {
             return;
         }
         this.onSearch();
@@ -278,9 +280,6 @@ class Search extends React.Component {
         });
         this.props.onBlur && this.props.onBlur(...args);
     }
-    changeHighlightKey = value => {
-        this.highlightKey = value;
-    };
 
     render() {
         const {
@@ -419,7 +418,6 @@ class Search extends React.Component {
                     ref={this.saveInputRef}
                     onFocus={this.handleFocus}
                     onBlur={this.handleBlur}
-                    changeHighlightKey={this.changeHighlightKey}
                 />
             </Group>
         );

diff --git a/src/select/auto-complete.jsx b/src/select/auto-complete.jsx
@@ -59,7 +59,6 @@ class AutoComplete extends Base {
         // 是否将当前高亮的选项作为 placeholder
         highlightHolder: PropTypes.bool,
         style: PropTypes.object,
-        changeHighlightKey: PropTypes.func,
     };
 
     static defaultProps = {
@@ -203,9 +202,6 @@ class AutoComplete extends Base {
 
         // 不自动高亮的情况下, highlightKey 根据value精确值走，也就是被选中元素自动高亮，这样也不会影响不在选项内的用户搜索操作
         if (!this.props.autoHighlightFirstItem) {
-            if (this.props.changeHighlightKey) {
-                this.props.changeHighlightKey(value);
-            }
             this.setState({
                 highlightKey: value,
             });

diff --git a/test/search/index-spec.js b/test/search/index-spec.js
@@ -9,6 +9,8 @@ import enUS from '../../src/locale/en-us';
 
 Enzyme.configure({ adapter: new Adapter() });
 
+const sleep = duration => new Promise(resolve => setTimeout(resolve, duration));
+
 /* eslint-disable no-undef, react/jsx-filename-extension */
 describe('Search', () => {
     describe('render', () => {
@@ -77,14 +79,13 @@ describe('Search', () => {
                     .text() === 'sc'
             );
         });
-        it('onSearch run only once', () => {
-            let isFlag = false;
-            const onSearch = () => {
-                isFlag = !isFlag;
-                assert(isFlag === true);
-            };
-            const wrapper = mount(<Search dataSource={[{ label: 'a', value: 'a' }]} value={'a'} onSearch={onSearch} />);
+        it.only('onSearch run only once', async () => {
+            const onSearch = sinon.spy();
+            const wrapper = mount(<Search dataSource={['a']} onSearch={onSearch} autoHighlightFirstItem={false} />);
+            wrapper.find('input').simulate('change', { target: { value: 'a' } });
             wrapper.find('input').simulate('keydown', { keyCode: 13 });
+            assert(onSearch.calledOnce);
+            wrapper.unmount();
         });
     });
 

diff --git a/types/select/index.d.ts b/types/select/index.d.ts
@@ -171,7 +171,6 @@ export interface AutoCompleteProps extends HTMLAttributesWeak, CommonProps {
      *  默认高亮key
      */
     defaultHighlightKey?: string;
-    changeHighlightKey?: (value: string) => void;
 }
 
 export class AutoComplete extends React.Component<AutoCompleteProps, any> {}