chinwag/chinwagsocial
2
0
Fork 0
Code Issues Pull requests Releases 2 Wiki Activity

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

Browse source
This commit is contained in:
Eugen Rochko 2016-12-24 01:39:14 +01:00
parent 0a84ab43d2
commit c3e9ba6a66
2 changed files with 10 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/assets/javascripts/components/components/autosuggest_textarea.jsx
View file

@ -55,7 +55,7 @@ const AutosuggestTextarea = React.createClass({
if (token != null && this.state.lastToken !== token) { if (token != null && this.state.lastToken !== token) {
this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart }); this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
this.props.onSuggestionsFetchRequested(token); this.props.onSuggestionsFetchRequested(token);
} else if (token === null && this.state.lastToken != null) { } else if (token === null) {
this.setState({ lastToken: null }); this.setState({ lastToken: null });
this.props.onSuggestionsClearRequested(); this.props.onSuggestionsClearRequested();
} }
@ -107,6 +107,10 @@ const AutosuggestTextarea = React.createClass({
} }
}, },
onBlur () {
this.setState({ suggestionsHidden: true });
},
onSuggestionClick (suggestion, e) { onSuggestionClick (suggestion, e) {
e.preventDefault(); e.preventDefault();
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion); this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
@ -137,6 +141,7 @@ const AutosuggestTextarea = React.createClass({
onChange={this.onChange} onChange={this.onChange}
onKeyDown={this.onKeyDown} onKeyDown={this.onKeyDown}
onKeyUp={onKeyUp} onKeyUp={onKeyUp}
onBlur={this.onBlur}
/> />
<div style={{ display: (suggestions.size > 0 && !suggestionsHidden) ? 'block' : 'none' }} className='autosuggest-textarea__suggestions'> <div style={{ display: (suggestions.size > 0 && !suggestionsHidden) ? 'block' : 'none' }} className='autosuggest-textarea__suggestions'>

4
app/assets/stylesheets/components.scss
View file

@ -566,6 +566,10 @@
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
&:hover {
background: darken(#d9e1e8, 10%);
}
&.selected { &.selected {
background: #2b90d9; background: #2b90d9;
color: #fff; color: #fff;