Fix #357 - Also make textarea blur close suggestions which make it more accessible...

diff --git a/app/assets/javascripts/components/components/autosuggest_textarea.jsx b/app/assets/javascripts/components/components/autosuggest_textarea.jsx
index 95ca5f2f65d4c99fe1f82222d017c21ccfc69118..8d9da16014158f6cf443006d459b1fa8ff6a9763 100644 (file)
--- a/app/assets/javascripts/components/components/autosuggest_textarea.jsx
+++ b/app/assets/javascripts/components/components/autosuggest_textarea.jsx
@@ -55,7 +55,7 @@ const AutosuggestTextarea = React.createClass({
     if (token != null && this.state.lastToken !== token) {
       this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
       this.props.onSuggestionsFetchRequested(token);
-    } else if (token === null && this.state.lastToken != null) {
+    } else if (token === null) {
       this.setState({ lastToken: null });
       this.props.onSuggestionsClearRequested();
     }
@@ -107,6 +107,10 @@ const AutosuggestTextarea = React.createClass({
     }
   },
 
+  onBlur () {
+    this.setState({ suggestionsHidden: true });
+  },
+
   onSuggestionClick (suggestion, e) {
     e.preventDefault();
     this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
@@ -137,6 +141,7 @@ const AutosuggestTextarea = React.createClass({
           onChange={this.onChange}
           onKeyDown={this.onKeyDown}
           onKeyUp={onKeyUp}
+          onBlur={this.onBlur}
         />
 
         <div style={{ display: (suggestions.size > 0 && !suggestionsHidden) ? 'block' : 'none' }} className='autosuggest-textarea__suggestions'>

diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 1689193a86e4268563f6ad9e5069d1819073003a..9f2d1217f3fb7af31922b564956320d508eb9745 100644 (file)
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -566,6 +566,10 @@
   padding: 10px;
   cursor: pointer;
 
+  &:hover {
+    background: darken(#d9e1e8, 10%);
+  }
+
   &.selected {
     background: #2b90d9;
     color: #fff;