Merge pull request #1363 from botpress/sp_fix_qna_input

fix(qna): textual input bad ux
botpress · Jan 29, 2019 · 5b9659e · 5b9659e
2 parents 93344a8 + 9c74674
commit 5b9659e
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 18 deletions.
diff --git a/modules/qna/src/views/FormModal.jsx b/modules/qna/src/views/FormModal.jsx
@@ -250,7 +250,7 @@ export default class FormModal extends Component {
                     onChange={this.changeItemAction('isText')}
                     tabIndex="-1"
                   />
-                  <label htmlFor="reply">&nbsp; Type your answer</label>
+                  <label htmlFor="reply">&nbsp; Bot will say:</label>
                 </span>
 
                 <ElementsList

diff --git a/src/bp/ui-studio/src/web/components/Shared/ElementsList/InputElement.jsx b/src/bp/ui-studio/src/web/components/Shared/ElementsList/InputElement.jsx
@@ -1,3 +1,4 @@
+import { get } from 'lodash'
 import React from 'react'
 import classnames from 'classnames'
 import style from './style.scss'
@@ -9,21 +10,38 @@ export class InputElement extends React.Component {
     error: undefined
   }
 
+  get inputValue() {
+    return get(this.elementInputRef, 'current.value', '')
+  }
+
+  get inputNotEmpty() {
+    return this.inputValue.length > 0
+  }
+
   handleOnEnter = event => {
-    const inputValue = event.target.value.trim()
-    const inputNotEmpty = inputValue !== ''
-    const elementUnique = !this.props.elements.includes(inputValue)
-
-    if (event.key === 'Enter') {
-      if (inputNotEmpty && elementUnique) {
-        this.setState({ error: undefined }, () => this.props.onEnterPressed(inputValue))
-
-        if (this.props.cleanInputAfterEnterPressed) {
-          this.elementInputRef.current.value = ''
-        }
-      } else {
-        this.setState({ error: new Error('The element must be unique and cannot be an empty string.') })
-      }
+    // console.log(event.key, this.inputNotEmpty)
+    if (event.key === 'Enter' && this.inputNotEmpty) {
+      this.tryAddElement(this.inputValue)
+    }
+  }
+
+  handleOnBlur = _event => {
+    if (this.inputNotEmpty && this.inputNotEmpty) {
+      this.tryAddElement()
+    }
+  }
+
+  tryAddElement = () => {
+    const elementUnique = !this.props.elements.includes(this.inputValue)
+    if (!this.inputNotEmpty || !elementUnique) {
+      return this.setState({ error: new Error('The element must be unique and cannot be an empty string.') })
+    }
+
+    const value = this.inputValue // make a copy because of async
+    this.setState({ error: undefined }, () => this.props.onElementAdd(value))
+
+    if (this.props.cleanInputAfterEnterPressed) {
+      this.elementInputRef.current.value = ''
     }
   }
 
@@ -37,6 +55,7 @@ export class InputElement extends React.Component {
           type="text"
           placeholder={this.props.placeholder || ''}
           defaultValue={this.props.defaultValue || ''}
+          onBlur={this.handleOnBlur}
           onKeyDown={this.handleOnEnter}
         />
         {this.state.error && <div>{this.state.error.message}</div>}

diff --git a/src/bp/ui-studio/src/web/components/Shared/ElementsList/index.jsx b/src/bp/ui-studio/src/web/components/Shared/ElementsList/index.jsx
@@ -15,7 +15,7 @@ export default class ElementsList extends React.Component {
     this.setState({ editElementIndex: index })
   }
 
-  handleEditEnter = (element, index) => {
+  handleNewElement = (element, index) => {
     this.setState({ editElementIndex: undefined })
     this.props.update(element, index)
   }
@@ -27,7 +27,7 @@ export default class ElementsList extends React.Component {
           key={`elements_edit_element_${index}`}
           defaultValue={element}
           elements={this.props.elements}
-          onEnterPressed={element => this.handleEditEnter(element, index)}
+          onElementAdd={element => this.handleNewElement(element, index)}
         />
       )
     } else {
@@ -50,7 +50,7 @@ export default class ElementsList extends React.Component {
           invalid={this.props.invalid}
           cleanInputAfterEnterPressed={true}
           elements={this.props.elements}
-          onEnterPressed={this.props.create}
+          onElementAdd={this.props.create}
         />
         {this.props.elements && this.props.elements.map((element, index) => this.renderElement(element, index))}
       </div>