From 8e8e38f2a083d3076e97cb9eb1e92500b68866b9 Mon Sep 17 00:00:00 2001
From: robmc <robmc@zillow.com>
Date: Thu, 21 Feb 2019 13:24:11 -0800
Subject: [PATCH] MON-560820 Update fuzzy collection on render, sync input
 value to selection

- Updates the fuse (fuzzy) collection on render instead of class constuction
- Sets the input value to the current selection
- Exposes prettier config from eslint to prettier bin
---
 .prettierrc.js |  1 +
 src/index.js   | 41 +++++++++++++++++++++++++++++------------
 2 files changed, 30 insertions(+), 12 deletions(-)
 create mode 100644 .prettierrc.js

diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 0000000..01ec5df
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1 @@
+module.exports = require("./.eslintrc").rules["prettier/prettier"][1];
diff --git a/src/index.js b/src/index.js
index f4710c3..b56762a 100644
--- a/src/index.js
+++ b/src/index.js
@@ -113,6 +113,7 @@ export default class FuzzySearch extends Component {
       results: [],
       selectedIndex: 0,
       selectedValue: {},
+      value: '',
     };
     this.handleChange = this.handleChange.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
@@ -156,29 +157,39 @@ export default class FuzzySearch extends Component {
 
   getResultsTemplate() {
     return this.state.results.map((val, i) => {
-      const style = this.state.selectedIndex === i
-        ? styles.selectedResultStyle
-        : styles.resultsStyle;
-      return <div key={i} style={style}>{val.title}</div>;
+      const style =
+        this.state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle;
+      return (
+        <div key={i} style={style}>
+          {val.title}
+        </div>
+      );
     });
   }
 
   handleChange(e) {
     this.setState({
       results: this.fuse.search(e.target.value).slice(0, this.props.maxResults - 1),
+      value: e.target.value,
     });
   }
 
   handleKeyDown(e) {
     const { results, selectedIndex } = this.state;
+
+    // Handle DOWN arrow
     if (e.keyCode === 40 && selectedIndex < results.length - 1) {
       this.setState({
         selectedIndex: selectedIndex + 1,
       });
+
+      // Handle UP arrow
     } else if (e.keyCode === 38 && selectedIndex > 0) {
       this.setState({
         selectedIndex: selectedIndex - 1,
       });
+
+      // Handle ENTER
     } else if (e.keyCode === 13) {
       if (results[selectedIndex]) {
         this.props.onSelect(results[this.state.selectedIndex]);
@@ -189,6 +200,7 @@ export default class FuzzySearch extends Component {
       this.setState({
         results: [],
         selectedIndex: 0,
+        value: results[this.state.selectedIndex].item.value,
       });
     }
   }
@@ -206,7 +218,12 @@ export default class FuzzySearch extends Component {
   }
 
   render() {
-    const { className, width, resultsTemplate, placeholder, autoFocus } = this.props;
+    const { autoFocus, className, list, placeholder, resultsTemplate, width } = this.props;
+
+    // Update the search space list
+    if (this.fuse.setCollection && list) {
+      this.fuse.setCollection(list);
+    }
 
     const mainClass = classNames('react-fuzzy-search', className);
 
@@ -214,19 +231,19 @@ export default class FuzzySearch extends Component {
       <div className={mainClass} style={{ width }} onKeyDown={this.handleKeyDown}>
         <div style={styles.searchBoxWrapper}>
           <input
-            type="text"
-            style={styles.searchBoxStyle}
+            autoFocus={autoFocus}
             onChange={this.handleChange}
             placeholder={placeholder}
-            autoFocus={autoFocus}
-            value={this.state.selectedValue && this.state.selectedValue.title}
+            style={styles.searchBoxStyle}
+            type="text"
+            value={this.state.value}
           />
         </div>
-        {this.state.results &&
-          this.state.results.length > 0 &&
+        {this.state.results && this.state.results.length > 0 && (
           <div style={styles.resultsWrapperStyle}>
             {resultsTemplate(this.props, this.state, styles, this.handleMouseClick)}
-          </div>}
+          </div>
+        )}
       </div>
     );
   }