Revert "FIX (searchFn)[#101] searchFn callback should only call once when typing in the search bar"

__tests__/__snapshots__/index.spec.js.snap

@@ -453,149 +453,6 @@ exports[`<Select/> component <Select/> renders with clearable 1`] = `
 </div>
 `;
 
-exports[`<Select/> component <Select/> renders with custom search function 1`] = `
-.emotion-6 {
-  box-sizing: border-box;
-  position: relative;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  border: 1px solid #ccc;
-  width: 100%;
-  border-radius: 2px;
-  padding: 2px 5px;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  direction: ltr;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  min-height: 36px;
-  pointer-events: all;
-}
-
-.emotion-6:hover,
-.emotion-6:focus-within {
-  border-color: #0074D9;
-}
-
-.emotion-6:focus,
-.emotion-6:focus-within {
-  outline: 0;
-  box-shadow: 0 0 0 3px rgba(0,116,217,0.2);
-}
-
-.emotion-6 * {
-  box-sizing: border-box;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.emotion-0 {
-  line-height: inherit;
-  border: none;
-  margin-left: 5px;
-  background: transparent;
-  font-size: smaller;
-}
-
-.emotion-0:focus {
-  outline: none;
-}
-
-.emotion-4 {
-  text-align: center;
-  pointer-events: none;
-  margin: 0 0 0 5px;
-  -webkit-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-  cursor: pointer;
-}
-
-.emotion-4 svg {
-  width: 16px;
-  height: 16px;
-}
-
-.emotion-4:hover path {
-  stroke: #0074D9;
-}
-
-.emotion-4:focus {
-  outline: none;
-}
-
-.emotion-4:focus path {
-  stroke: #0074D9;
-}
-
-<div>
-  <div
-    className="react-dropdown-select undefined emotion-6 emotion-7"
-    color="#0074D9"
-    direction="ltr"
-    disabled={false}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    tabIndex="0"
-  >
-    <div
-      className="react-dropdown-select-content react-dropdown-select-type-single emotion-2 emotion-3"
-      onClick={[Function]}
-    >
-      <input
-        className="react-dropdown-select-input emotion-0 emotion-1"
-        disabled={false}
-        onBlur={[Function]}
-        onChange={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onKeyPress={[Function]}
-        placeholder="Select..."
-        readOnly={false}
-        size={3}
-        tabIndex="-1"
-        value="Zer"
-      />
-    </div>
-    <div
-      className="react-dropdown-select-dropdown-handle emotion-4 emotion-5"
-      color="#0074D9"
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      onKeyPress={[Function]}
-      rotate={1}
-      tabIndex="-1"
-    >
-      <svg
-        fill="currentColor"
-        viewBox="0 0 40 40"
-      >
-        <path
-          d="M31 26.4q0 .3-.2.5l-1.1 1.2q-.3.2-.6.2t-.5-.2l-8.7-8.8-8.8 8.8q-.2.2-.5.2t-.5-.2l-1.2-1.2q-.2-.2-.2-.5t.2-.5l10.4-10.4q.3-.2.6-.2t.5.2l10.4 10.4q.2.2.2.5z"
-        />
-      </svg>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`<Select/> component <Select/> renders with loading 1`] = `
 .emotion-8 {
   box-sizing: border-box;

__tests__/components/Dropdown.spec.js

@@ -10,8 +10,7 @@ const props = {
     dropdownHeight: '300px'
   },
   state: {
-    selectBounds: {},
-    searchResults: [],
+    selectBounds: {}
   },
   methods: {
     searchResults: () => [],

__tests__/index.spec.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import TestRenderer from 'react-test-renderer';
-import { LIB_NAME } from '../src/constants';
 
 import Select from '../src/index';
 
@@ -60,31 +59,9 @@ describe('<Select/> component', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('<Select/> renders with custom search function', () => {
-    const options = [
-      { id: 0, name: 'Zero' },
-      { id: 1, name: 'One' },
-      { id: 2, name: 'Two' },
-    ];
-
-    const searchFn = ({ props, state }) => {
-      return props.options.filter(({ name }) => new RegExp(state.search).test(name) );
-    };
-
-    const component = selectWithProps(<Select {...props({ searchFn, options })} />);
-
-    const input = component.root.find(element => element.props.className === `${LIB_NAME}-input`);
-
-    TestRenderer.act(() => input.props.onChange({ target: { value: 'Zer' } }));
-
-    expect(component.toTree().instance.state.search).toBe('Zer');
-    expect(component.toTree().instance.state.searchResults).toStrictEqual([{ id: 0, name: 'Zero'}])
-    expect(component.toJSON()).toMatchSnapshot();
-  });
-
   it('<Select/> is disabled', () => {
     const tree = selectWithProps(<Select {...props({ disabled: true })} />).toJSON();
 
     expect(tree).toMatchSnapshot();
-  });
+  })
 });

docs/src/pages/examples.js

@@ -28,7 +28,6 @@ import ExternalClear from '../examples/ExternalClear';
 import AccessDataByPath from '../examples/AccessDataByPath';
 import CustomDropdownHandle from '../examples/CustomDropdownHandle';
 import WithAnimation from '../examples/WithAnimation';
-import WithSearchFn from '../examples/WithSearchFn';
 
 const demoOptions = options.map((option) => ({
   ...option,
@@ -117,10 +116,6 @@ const Examples = () => (
       <WithAnimation title={`With animations`} options={demoOptions} />
     </Wrapper>
 
-    <Wrapper>
-      <WithSearchFn title={`With a custom search function`} options={demoOptions} />
-    </Wrapper>
-
     <br />
     <br />
     <br />

docs/src/pages/state.md

@@ -11,6 +11,4 @@ Access to current state of <Select/> component
 | dropdown     | boolean | check if dropdown is open                            |
 | values       | array   | selected value(s)                                    |
 | search       | string  | current search string                                |
-| searchResults| string  | Filtered search results
-|
 | selectBounds | object  | current `getBoundingClientRect()` of <Select/> |

src/components/Dropdown.js

@@ -49,26 +49,27 @@ const Dropdown = ({ props, state, methods }) => (
             {props.createNewLabel.replace('{search}', `"${state.search}"`)}
           </AddNew>
         )}
-        {state.searchResults.length === 0 ? (
+        {methods.searchResults().length === 0 ? (
           <NoData
             className={`${LIB_NAME}-no-data`}
             state={state}
             props={props}
             methods={methods}
           />
         ) : (
-            state.searchResults
-              .map((item, itemIndex) => (
-                <Item
-                  key={item[props.valueField]}
-                  item={item}
-                  itemIndex={itemIndex}
-                  state={state}
-                  props={props}
-                  methods={methods}
-                />
-              ))
-          )}
+          methods
+            .searchResults()
+            .map((item, itemIndex) => (
+              <Item
+                key={item[props.valueField]}
+                item={item}
+                itemIndex={itemIndex}
+                state={state}
+                props={props}
+                methods={methods}
+              />
+            ))
+        )}
       </React.Fragment>
     )}
   </DropDown>

src/index.js

@@ -74,8 +74,7 @@ export class Select extends Component {
       values: props.values,
       search: '',
       selectBounds: {},
-      cursor: null,
-      searchResults: props.options,
+      cursor: null
     };
 
     this.methods = {
@@ -290,9 +289,7 @@ export class Select extends Component {
     });
 
     this.setState({
-      search: event.target.value,
-    }, () => {
-      this.setState({ searchResults: this.searchResults() })
+      search: event.target.value
     });
   };
 
@@ -394,7 +391,7 @@ export class Select extends Component {
   };
 
   handleKeyDownFn = ({ event, state, props, methods, setState }) => {
-    const { cursor, searchResults } = state;
+    const { cursor } = state;
     const escape = event.key === 'Escape';
     const enter = event.key === 'Enter';
     const arrowUp = event.key === 'ArrowUp';
@@ -426,7 +423,7 @@ export class Select extends Component {
     }
 
     if (enter) {
-      const currentItem = searchResults[cursor];
+      const currentItem = methods.searchResults()[cursor];
       if (currentItem && !currentItem.disabled) {
         if (props.create && valueExistInSelected(state.search, state.values, props)) {
           return null;
@@ -436,7 +433,7 @@ export class Select extends Component {
       }
     }
 
-    if ((arrowDown || (tab && state.dropdown)) && searchResults.length === cursor) {
+    if ((arrowDown || (tab && state.dropdown)) && methods.searchResults().length === cursor) {
       return setState({
         cursor: 0
       });
@@ -456,7 +453,7 @@ export class Select extends Component {
 
     if ((arrowUp || (shiftTab && state.dropdown)) && cursor === 0) {
       setState({
-        cursor: searchResults.length
+        cursor: methods.searchResults().length
       });
     }