better autocomplete

1 files changed, 12 insertions, 8 deletions

diff --git a/scraper/client/common/autocomplete.component.js b/scraper/client/common/autocomplete.component.js
index a619e2c8..e6c638eb 100644
--- a/scraper/client/common/autocomplete.component.js
+++ b/scraper/client/common/autocomplete.component.js
@@ -84,7 +84,8 @@ class Autocomplete extends Component {
   }
 
   handleKeyDown(e) {
-    let id
+    let name
+    console.log(e.keyCode)
     switch (e.keyCode) {
       case 27: // escape
         e.preventDefault()
@@ -104,10 +105,13 @@ class Autocomplete extends Component {
           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
+        this.handleSelect(this.state.q, false)
         return false
       default:
         break
@@ -161,9 +165,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: [] })
   }
 
@@ -180,7 +184,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}