From b94cad3271d8269b5965d0096ce5564abed9ad53 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 28 Mar 2019 16:04:43 +0100
Subject: better autocomplete

---
 scraper/client/common/autocomplete.component.js | 20 ++++++++++++--------
 scraper/client/paper/paper.verify.js            | 12 ++++++------
 2 files changed, 18 insertions(+), 14 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}
diff --git a/scraper/client/paper/paper.verify.js b/scraper/client/paper/paper.verify.js
index 1b7e5364..61faa24a 100644
--- a/scraper/client/paper/paper.verify.js
+++ b/scraper/client/paper/paper.verify.js
@@ -398,8 +398,8 @@ class PaperVerify extends Component {
           <Autocomplete
             placeholder='Institution #1'
             value={this.state.institution_1}
-            onSelect={value => {
-              this.setState({ institution_1: value, validate_1: true })
+            onSelect={(institution_1, validate_1) => {
+              this.setState({ institution_1, validate_1 })
             }}
             onCancel={value => {
               this.setState({ institution_1: '', validate_1: false })
@@ -412,8 +412,8 @@ class PaperVerify extends Component {
           <Autocomplete
             placeholder='Institution #2'
             value={this.state.institution_2}
-            onSelect={value => {
-              this.setState({ institution_2: value, validate_2: true })
+            onSelect={(institution_2, validate_2) => {
+              this.setState({ institution_2, validate_2 })
             }}
             onCancel={value => {
               this.setState({ institution_2: '', validate_2: false })
@@ -426,8 +426,8 @@ class PaperVerify extends Component {
           <Autocomplete
             placeholder='Institution #3'
             value={this.state.institution_3}
-            onSelect={value => {
-              this.setState({ institution_3: value, validate_3: true })
+            onSelect={(institution_3, validate_3) => {
+              this.setState({ institution_3, validate_3 })
             }}
             onCancel={value => {
               this.setState({ institution_3: '', validate_3: false })
-- 
cgit v1.2.3-70-g09d2