Merge pull request #179 from input-output-hk/fix/ddw-662-fix-react-polymorph-select-search-issues

[DDW-662] Fixes React Polymorph Select search issues

Author: thedanheller

CHANGELOG.md

@@ -24,6 +24,7 @@ vNext
 
 ### Fixes :muscle:
 
+- Fixed Select search issues([PR 179](https://github.com/input-output-hk/react-polymorph/pull/179))
 - Fixed Select Search styles and minor code issues ([PR 175](https://github.com/input-output-hk/react-polymorph/pull/175))
 - Fixed a wrong variable name for the select search highlight color ([PR 170](https://github.com/input-output-hk/react-polymorph/pull/170))
 - Fixed an issue related to Numeric Input when entering numbers after having selected the decimal separator ([PR 167](https://github.com/input-output-hk/react-polymorph/pull/167))

source/components/Options.js

@@ -45,6 +45,7 @@ type Props = {
   optionRenderer?: Function,
   optionsRef?: ElementRef<any>,
   optionsMaxHeight?: number,
+  persistSearchValue?: boolean,
   render?: Function,
   resetOnClose: boolean,
   searchHeight: ?number,
@@ -179,7 +180,8 @@ class OptionsBase extends Component<Props, State> {
   };
 
   isSelectedOption = (optionIndex: number) => {
-    const { options, isOpeningUpward } = this.props;
+    const { isOpeningUpward } = this.props;
+    const options = this.getFilteredOptions() || []
     const index = isOpeningUpward
       ? options.length - 1 - optionIndex
       : optionIndex;
@@ -197,25 +199,29 @@ class OptionsBase extends Component<Props, State> {
   };
 
   handleClickOnOption = (option: ?Object, event: SyntheticEvent<>) => {
+    const { onChange, onBlur, persistSearchValue } = this.props;
     if (option) {
       if (option.isDisabled) return;
-      if (this.props.onChange) this.props.onChange(option, event);
+      if (onChange) onChange(option, event);
+    }
+    if (onBlur) onBlur(event);
+    if (!persistSearchValue) {
+      this.handleClearSearchValue();
     }
-    if (this.props.onBlur) this.props.onBlur(event);
     this.close();
   };
 
   handleSearch = (searchValue: string) => {
     this.setState({
       searchValue
     });
-  }
+  };
 
   handleClearSearchValue = () => {
     this.setState({
       searchValue: '',
     });
-  }
+  };
 
   getFilteredOptions = () => {
     const { hasSearch, onSearch, options, highlightSearch, optionRenderer } = this.props;
@@ -232,7 +238,7 @@ class OptionsBase extends Component<Props, State> {
       return regex.test(label);
     });
     return filteredOptions;
-  }
+  };
 
   // returns an object containing props, theme, and method handlers
   // associated with rendering this.props.options, the user can call