fix: fix selectPicker when search is controlled and exit Dropdown wit…

src/SelectPicker/SelectPicker.tsx

@@ -83,7 +83,7 @@ export interface SelectProps<T> {
   onGroupTitleClick?: (event: React.SyntheticEvent) => void;
 
   /** Called when searching */
-  onSearch?: (searchKeyword: string, event: React.SyntheticEvent) => void;
+  onSearch?: (searchKeyword: string, event?: React.SyntheticEvent) => void;
 
   /** Called when clean */
   onClean?: (event: React.SyntheticEvent) => void;
@@ -288,6 +288,7 @@ const SelectPicker = React.forwardRef(
     const handleExited = useCallback(() => {
       setSearchKeyword('');
       setActive(false);
+      onSearch?.('');
       onClose?.();
     }, [onClose, setSearchKeyword]);
 

src/SelectPicker/test/SelectPickerSpec.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import React, { useRef, useState } from 'react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
 import ReactTestUtils from 'react-dom/test-utils';
 import { getDOMNode, getInstance } from '@test/testUtils';
 import SelectPicker from '../SelectPicker';
@@ -24,6 +24,10 @@ const data = [
   }
 ];
 
+afterEach(() => {
+  cleanup();
+});
+
 describe('SelectPicker', () => {
   it('Should clean selected default value', () => {
     const instance = getDOMNode(<SelectPicker defaultOpen data={data} defaultValue={'Eugenia'} />);
@@ -400,4 +404,53 @@ describe('SelectPicker', () => {
       expect(getByTestId('content')).to.have.text('Not selected');
     });
   });
+  it('SearchWord should be reset when controlled and triggered off', done => {
+    let searchRef = '';
+    let onClose = null;
+    const promise = new Promise(resolve => {
+      onClose = resolve;
+    });
+    const Wrapper = () => {
+      const [search, setSearch] = useState(searchRef);
+      const containerRef = useRef();
+      searchRef = search;
+      const handleSearch = value => {
+        setSearch(value);
+      };
+      const handleClose = () => {
+        onClose();
+      };
+      const container = () => containerRef.current;
+      return (
+        <div ref={containerRef}>
+          <button id="exit">exit</button>
+          <SelectPicker
+            container={container}
+            search={search}
+            defaultOpen
+            onClose={handleClose}
+            onSearch={handleSearch}
+            data={data}
+          />
+        </div>
+      );
+    };
+    Wrapper.displayName = 'WrapperSelectPicker';
+    const { container } = render(<Wrapper />);
+
+    const exit = container?.querySelector('#exit');
+    const input = container.querySelector('.rs-picker-search-bar-input');
+
+    // change search
+    fireEvent.change(input, { target: { value: 'a' } });
+    assert.equal(searchRef, 'a');
+
+    // close select
+    fireEvent.mouseDown(exit, { bubbles: true });
+
+    promise.then(() => {
+      assert.equal(searchRef, '');
+      done();
+    });
+  });
 });