Merge branch 'master' of github.com:adamhrv/megapixels_dev

1 files changed, 31 insertions, 18 deletions

diff --git a/scraper/client/common/autocomplete.component.js b/scraper/client/common/autocomplete.component.js
index e2908cd1..67dc78c9 100644
--- a/scraper/client/common/autocomplete.component.js
+++ b/scraper/client/common/autocomplete.component.js
@@ -49,6 +49,10 @@ class Autocomplete extends Component {
 
   componentDidMount() {
     // build index based on what's in the hierarchy
+    if (!this.props.institutions.loading) this.buildIndex()
+  }
+  
+  buildIndex() {
     const { entities, lookup } = this.props.institutions
     let index = []
     this.index = index
@@ -69,6 +73,9 @@ class Autocomplete extends Component {
   }
 
   componentDidUpdate(oldProps) {
+    if (oldProps.institutions.loading && !this.props.institutions.loading) {
+      this.buildIndex()
+    }
     if (this.props.vetting !== oldProps.vetting) {
       this.handleChange({ target: { value: this.props.vetting } })
     } else if (this.props.value !== oldProps.value) {
@@ -77,30 +84,37 @@ class Autocomplete extends Component {
   }
 
   handleKeyDown(e) {
-    let id
+    let name
+    console.log(e.keyCode)
     switch (e.keyCode) {
       case 27: // escape
         e.preventDefault()
         this.handleCancel()
         break
-      case 37: // left
       case 38: // up
         e.preventDefault()
         this.setState({
           selected: (this.state.matches.length + this.state.selected - 1) % this.state.matches.length
         })
         return false
-      case 39: // right
       case 40: // down
         e.preventDefault()
         this.setState({
           selected: (this.state.selected + 1) % this.state.matches.length
         })
         return false
-      case 13: // enter
-        id = this.state.matches[this.state.selected]
+      case 13: // enter - select from the list
+        name = this.state.matches[this.state.selected]
         e.preventDefault()
-        this.handleSelect(id)
+        this.handleSelect(name, true)
+        return false
+      case 9: // tab - keep the unverified text
+        name = this.state.matches[this.state.selected]
+        if (name === this.state.q) {
+          this.handleSelect(this.state.q, true)
+        } else {
+          this.handleSelect(this.state.q, false)
+        }
         return false
       default:
         break
@@ -121,7 +135,6 @@ class Autocomplete extends Component {
       return
     }
     let seen = {}
-    let matches = []
     value.split(' ').forEach(word => {
       const re = new RegExp(word)
       this.index.forEach(([synonym, term]) => {
@@ -139,14 +152,14 @@ class Autocomplete extends Component {
           }
         }
       })
-      matches = Object.keys(seen)
-        .map(term => [seen[term], term])
-        .sort((a, b) => {
-          return b[0] - a[0]
-        })
-        .slice(0, 100)
-        .map(pair => pair[1])
     })
+    let matches = Object.keys(seen)
+      .map(term => [seen[term], term])
+      .sort((a, b) => {
+        return b[0] - a[0]
+      })
+      .slice(0, 100)
+      .map(pair => pair[1])
     this.setState({
       q,
       selected: 0,
@@ -154,9 +167,9 @@ class Autocomplete extends Component {
     })
   }
 
-  handleSelect(name) {
-    console.log('select', name)
-    if (this.props.onSelect) this.props.onSelect(name)
+  handleSelect(name, valid) {
+    console.log('select', name, valid)
+    if (this.props.onSelect) this.props.onSelect(name, valid)
     this.setState({ q: name, selected: 0, matches: [] })
   }
 
@@ -173,7 +186,7 @@ class Autocomplete extends Component {
         <div
           key={i}
           className={selected === i ? 'selected' : ''}
-          onClick={() => this.handleSelect(match)}
+          onClick={() => this.handleSelect(match, true)}
           onMouseEnter={() => this.setState({ selected: i })}
         >
           {label}