bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix composer jump by reseting lastToken on click and arrow up and down in autosuggesttextarea

Browse source
This commit is contained in:
Mary Kate 2020-09-27 15:43:23 -05:00
parent d6a7ef8e70
commit 0b7763e726
1 changed files with 27 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/soapbox/components/autosuggest_textarea.js
View file

@ -50,6 +50,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
autoFocus: PropTypes.bool, autoFocus: PropTypes.bool,
onFocus: PropTypes.func, onFocus: PropTypes.func,
onBlur: PropTypes.func, onBlur: PropTypes.func,
clickableAreaRef: PropTypes.object,
}; };
static defaultProps = { static defaultProps = {
@ -107,6 +108,8 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
if (suggestions.size > 0 && !suggestionsHidden) { if (suggestions.size > 0 && !suggestionsHidden) {
e.preventDefault(); e.preventDefault();
this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) }); this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) });
} else {
this.setState({ lastToken: null });
} }
break; break;
@ -114,6 +117,8 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
if (suggestions.size > 0 && !suggestionsHidden) { if (suggestions.size > 0 && !suggestionsHidden) {
e.preventDefault(); e.preventDefault();
this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, 0) }); this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, 0) });
} else {
this.setState({ lastToken: null });
} }
break; break;
@ -159,6 +164,28 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
this.textarea.focus(); this.textarea.focus();
} }
getClickableArea = () => {
const { clickableAreaRef } = this.props;
return clickableAreaRef ? clickableAreaRef.current : this.form;
}
isClickInside = (e) => {
return [
this.getClickableArea(),
document.querySelector('.autosuggest-textarea__textarea'),
].some(element => element && element.contains(e.target));
}
handleClick = (e) => {
if (this.isClickInside(e)) {
this.setState({ lastToken: null });
}
}
componentDidMount() {
document.addEventListener('click', this.handleClick, true);
}
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
const { suggestions } = this.props; const { suggestions } = this.props;
if (suggestions !== prevProps.suggestions && suggestions.size > 0 && prevState.suggestionsHidden && prevState.focused) { if (suggestions !== prevProps.suggestions && suggestions.size > 0 && prevState.suggestionsHidden && prevState.focused) {