mastofe

commit: c3e9ba6a66bfcb9e33edebc73adea0a17d7f02a6
parent: 0a84ab43d24bf1973be263ccddca8eabd231f271
Author: Eugen Rochko <eugen@zeonfederated.com>
Date:   Sat, 24 Dec 2016 01:39:14 +0100

Fix #357 - Also make textarea blur close suggestions which make it more accessible on touch devices

Diffstat:
M
app/assets/javascripts/components/components/autosuggest_textarea.jsx
7
++++++-
M
app/assets/stylesheets/components.scss
4
++++

2 files changed, 10 insertions(+), 1 deletion(-)
diff --git 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
@@ -566,6 +566,10 @@
   padding: 10px;
   cursor: pointer;
 
+  &:hover {
+    background: darken(#d9e1e8, 10%);
+  }
+
   &.selected {
     background: #2b90d9;
     color: #fff;