From 0b7763e7267108b7ef70713b6ecbf9c85c952d48 Mon Sep 17 00:00:00 2001 From: Mary Kate Date: Sun, 27 Sep 2020 15:43:23 -0500 Subject: [PATCH 1/5] fix composer jump by reseting lastToken on click and arrow up and down in autosuggesttextarea --- .../components/autosuggest_textarea.js | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/app/soapbox/components/autosuggest_textarea.js b/app/soapbox/components/autosuggest_textarea.js index d9a044022..e60661f6b 100644 --- a/app/soapbox/components/autosuggest_textarea.js +++ b/app/soapbox/components/autosuggest_textarea.js @@ -50,6 +50,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { autoFocus: PropTypes.bool, onFocus: PropTypes.func, onBlur: PropTypes.func, + clickableAreaRef: PropTypes.object, }; static defaultProps = { @@ -107,6 +108,8 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { if (suggestions.size > 0 && !suggestionsHidden) { e.preventDefault(); this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) }); + } else { + this.setState({ lastToken: null }); } break; @@ -114,6 +117,8 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { if (suggestions.size > 0 && !suggestionsHidden) { e.preventDefault(); this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, 0) }); + } else { + this.setState({ lastToken: null }); } break; @@ -159,6 +164,28 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { 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) { const { suggestions } = this.props; if (suggestions !== prevProps.suggestions && suggestions.size > 0 && prevState.suggestionsHidden && prevState.focused) { From 99f0a069dd6092e7d9c835a5f2ffc2db42bf14bf Mon Sep 17 00:00:00 2001 From: Mary Kate Date: Sun, 27 Sep 2020 16:32:07 -0500 Subject: [PATCH 2/5] pass getClickableArea into autosuggesttextarea as prop --- app/soapbox/components/autosuggest_textarea.js | 8 ++------ app/soapbox/features/compose/components/compose_form.js | 1 + 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/app/soapbox/components/autosuggest_textarea.js b/app/soapbox/components/autosuggest_textarea.js index e60661f6b..703aa9797 100644 --- a/app/soapbox/components/autosuggest_textarea.js +++ b/app/soapbox/components/autosuggest_textarea.js @@ -51,6 +51,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { onFocus: PropTypes.func, onBlur: PropTypes.func, clickableAreaRef: PropTypes.object, + getClickableArea: PropTypes.func.isRequired, }; static defaultProps = { @@ -164,14 +165,9 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { this.textarea.focus(); } - getClickableArea = () => { - const { clickableAreaRef } = this.props; - return clickableAreaRef ? clickableAreaRef.current : this.form; - } - isClickInside = (e) => { return [ - this.getClickableArea(), + this.props.getClickableArea(), document.querySelector('.autosuggest-textarea__textarea'), ].some(element => element && element.contains(e.target)); } diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js index af8ce4263..39647c923 100644 --- a/app/soapbox/features/compose/components/compose_form.js +++ b/app/soapbox/features/compose/components/compose_form.js @@ -286,6 +286,7 @@ class ComposeForm extends ImmutablePureComponent { onSuggestionSelected={this.onSuggestionSelected} onPaste={onPaste} autoFocus={shouldAutoFocus} + getClickableArea={this.getClickableArea} > { !condensed && From 5ad39921f9a516105e6fb54e8888ba38e7f09b7f Mon Sep 17 00:00:00 2001 From: Mary Kate Date: Sun, 27 Sep 2020 17:02:10 -0500 Subject: [PATCH 3/5] re-open compose modal after changing privacy, fixes #200 --- .../features/compose/containers/privacy_dropdown_container.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/features/compose/containers/privacy_dropdown_container.js b/app/soapbox/features/compose/containers/privacy_dropdown_container.js index c112bc553..0c3bbf83b 100644 --- a/app/soapbox/features/compose/containers/privacy_dropdown_container.js +++ b/app/soapbox/features/compose/containers/privacy_dropdown_container.js @@ -17,7 +17,7 @@ const mapDispatchToProps = dispatch => ({ isUserTouching, onModalOpen: props => dispatch(openModal('ACTIONS', props)), - onModalClose: () => dispatch(closeModal()), + onModalClose: () => (dispatch(closeModal()), dispatch(openModal('COMPOSE'))), }); From 136965acdd1197bbeeb4123831ca63f8d3c3c65a Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sun, 27 Sep 2020 17:55:04 -0500 Subject: [PATCH 4/5] Composer: remove click listener on unmount --- app/soapbox/components/autosuggest_textarea.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/soapbox/components/autosuggest_textarea.js b/app/soapbox/components/autosuggest_textarea.js index 703aa9797..060e817e8 100644 --- a/app/soapbox/components/autosuggest_textarea.js +++ b/app/soapbox/components/autosuggest_textarea.js @@ -182,6 +182,10 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { document.addEventListener('click', this.handleClick, true); } + componentWillUnmount() { + document.removeEventListener('click', this.handleClick, true); + } + componentDidUpdate(prevProps, prevState) { const { suggestions } = this.props; if (suggestions !== prevProps.suggestions && suggestions.size > 0 && prevState.suggestionsHidden && prevState.focused) { From d243b534866be06a529de4bfdfafedd93704fc0c Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sun, 27 Sep 2020 18:02:57 -0500 Subject: [PATCH 5/5] PrivacyDropdown: clean up dispatch calls --- .../compose/containers/privacy_dropdown_container.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/soapbox/features/compose/containers/privacy_dropdown_container.js b/app/soapbox/features/compose/containers/privacy_dropdown_container.js index 0c3bbf83b..a90d54fa6 100644 --- a/app/soapbox/features/compose/containers/privacy_dropdown_container.js +++ b/app/soapbox/features/compose/containers/privacy_dropdown_container.js @@ -17,7 +17,10 @@ const mapDispatchToProps = dispatch => ({ isUserTouching, onModalOpen: props => dispatch(openModal('ACTIONS', props)), - onModalClose: () => (dispatch(closeModal()), dispatch(openModal('COMPOSE'))), + onModalClose: () => { + dispatch(closeModal()); + dispatch(openModal('COMPOSE')); + }, });