fix(Search): enter search always be called once each time, close #4049 (

#4530)
alibaba-fusion · Nov 16, 2023 · aac300f · aac300f
1 parent 3dfe2da
commit aac300f
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 18 deletions.
diff --git a/src/search/Search.jsx b/src/search/Search.jsx
@@ -212,15 +212,20 @@ class Search extends React.Component {
 
         this.props.onChange(value, type, ...argv);
         if (type === 'enter') {
+            // 先记录，保留原先的执行顺序
+            const highlightKey = this.highlightKey;
+            // 重置
             this.highlightKey = '';
-            this.props.onSearch(value, this.state.filterValue);
+            // 若有匹配项，执行onSearch
+            if (highlightKey) {
+                this.props.onSearch(value, this.state.filterValue);
+            }
         }
     };
 
     onPressEnter = () => {
-        // when autoHighlightFirstItem = false, onToggleHighlightItem will not trigger, cause this.highlightKey is empty
-        // and trigger onSearch twice
-        if (this.highlightKey || !this.props.autoHighlightFirstItem) {
+        // 有匹配项情况，enter会触发 onChange，由那里执行onSearch
+        if (this.highlightKey) {
             return;
         }
         this.onSearch();

diff --git a/test/search/index-spec.js b/test/search/index-spec.js
@@ -79,14 +79,6 @@ describe('Search', () => {
                     .text() === 'sc'
             );
         });
-        it('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();
-        });
     });
 
     describe('behavior', () => {
@@ -132,15 +124,12 @@ describe('Search', () => {
             done();
         });
 
-        it('should support onSearch ', done => {
-            const onSearch = value => {
-                assert(value === '123');
-            };
+        it('should support onSearch ', () => {
+            const onSearch = sinon.spy();
             wrapper = mount(<Search defaultValue={'123'} onSearch={onSearch} />);
 
             wrapper.find('input').simulate('keydown', { keyCode: 13 });
-
-            done();
+            assert(onSearch.calledOnceWith('123'));
         });
 
         it('should support onChange/onSearch ', done => {
@@ -385,5 +374,18 @@ describe('Search', () => {
 
             done();
         });
+        it('should support dataSource and onSearch', () => {
+            const onSearch = sinon.spy();
+            wrapper.setProps({ onSearch });
+            // has matched item
+            wrapper.find('input').simulate('change', { target: { value: 'y' } });
+            wrapper.find('input').simulate('keydown', { keyCode: 13 });
+            assert(onSearch.calledOnceWith('yyy'));
+            // does not has matched item
+            wrapper.find('input').simulate('change', { target: { value: 'abc' } });
+            wrapper.find('input').simulate('keydown', { keyCode: 13 });
+            assert(onSearch.calledTwice);
+            assert(onSearch.calledWith('abc'));
+        });
     });
 });
diff --git a/test/search/issue-spec.js b/test/search/issue-spec.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import assert from 'power-assert';
+import sinon from 'sinon';
+import Search from '../../src/search/index';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+/* eslint-disable no-undef, react/jsx-filename-extension */
+describe('Search issues', function() {
+    // Fix https://github.com/alibaba-fusion/next/issues/4049
+    it('Enter search should be called once when autoHighlightFirstItem=false', function() {
+        const onSearch = sinon.spy();
+        const wrapper = mount(<Search dataSource={['a']} onSearch={onSearch} autoHighlightFirstItem={false} />);
+        // has matched item
+        wrapper.find('input').simulate('change', { target: { value: 'a' } });
+        wrapper.find('input').simulate('keydown', { keyCode: 13 });
+        assert(onSearch.calledOnceWith('a'));
+        // does not has matched item
+        wrapper.find('input').simulate('change', { target: { value: 'b' } });
+        wrapper.find('input').simulate('keydown', { keyCode: 13 });
+        assert(onSearch.calledTwice);
+        assert(onSearch.calledWith('b'));
+        wrapper.unmount();
+    });
+});