From 0df3c7428aead6edc55c9d863a350ed72732bed2 Mon Sep 17 00:00:00 2001 From: enahum Date: Mon, 2 Oct 2017 12:21:56 -0300 Subject: [PATCH] Fix search issues (#973) --- .../autocomplete/at_mention/at_mention.js | 6 +-- .../channel_mention/channel_mention.js | 6 +-- app/components/autocomplete/index.js | 15 ++++-- app/components/search_bar/search_bar.ios.js | 2 +- app/screens/search/search.js | 51 +++++++++++++++---- 5 files changed, 59 insertions(+), 21 deletions(-) diff --git a/app/components/autocomplete/at_mention/at_mention.js b/app/components/autocomplete/at_mention/at_mention.js index 990398e36..f14c3d888 100644 --- a/app/components/autocomplete/at_mention/at_mention.js +++ b/app/components/autocomplete/at_mention/at_mention.js @@ -158,7 +158,7 @@ export default class AtMention extends Component { completedDraft += postDraft.substring(cursorPosition); } - onChangeText(completedDraft); + onChangeText(completedDraft, true); this.setState({ active: false, mentionComplete: true @@ -258,8 +258,8 @@ export default class AtMention extends Component { render() { const {autocompleteUsers, requestStatus} = this.props; - if (!this.state.active && (requestStatus !== RequestStatus.STARTED || requestStatus !== RequestStatus.SUCCESS)) { - // If we are not in an active state return null so nothing is rendered + if ((!this.state.active && (requestStatus !== RequestStatus.STARTED || requestStatus !== RequestStatus.SUCCESS)) || this.state.mentionComplete) { + // If we are not in an active state or the mention has been completed return null so nothing is rendered // other components are not blocked. return null; } diff --git a/app/components/autocomplete/channel_mention/channel_mention.js b/app/components/autocomplete/channel_mention/channel_mention.js index ed8d78cad..c13aa9892 100644 --- a/app/components/autocomplete/channel_mention/channel_mention.js +++ b/app/components/autocomplete/channel_mention/channel_mention.js @@ -149,7 +149,7 @@ export default class ChannelMention extends Component { completedDraft += postDraft.substring(cursorPosition); } - onChangeText(completedDraft); + onChangeText(completedDraft, true); this.setState({ active: false, mentionComplete: true, @@ -199,8 +199,8 @@ export default class ChannelMention extends Component { }; render() { - if (!this.state.active) { - // If we are not in an active state return null so nothing is rendered + if (!this.state.active || this.state.mentionComplete) { + // If we are not in an active state or the mention has been completed return null so nothing is rendered // other components are not blocked. return null; } diff --git a/app/components/autocomplete/index.js b/app/components/autocomplete/index.js index 7619475c3..6f365bf76 100644 --- a/app/components/autocomplete/index.js +++ b/app/components/autocomplete/index.js @@ -4,6 +4,7 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; import { + Platform, StyleSheet, View } from 'react-native'; @@ -34,9 +35,10 @@ export default class Autocomplete extends PureComponent { }; render() { - const container = this.props.isSearch ? style.searchContainer : style.container; + const searchContainer = this.props.isSearch ? style.searchContainer : null; + const container = this.props.isSearch ? null : style.container; return ( - + { - this.props.onChangeText(''); + this.props.onChangeText('', true); }; onFocus = () => { diff --git a/app/screens/search/search.js b/app/screens/search/search.js index b49aff655..8049276b7 100644 --- a/app/screens/search/search.js +++ b/app/screens/search/search.js @@ -114,7 +114,7 @@ class Search extends Component { cancelSearch = () => { const {navigator} = this.props; - this.handleTextChanged(''); + this.handleTextChanged('', true); navigator.dismissModal({animationType: 'slide-down'}); }; @@ -162,7 +162,7 @@ class Search extends Component { } }; - handleTextChanged = (value) => { + handleTextChanged = (value, selectionChanged) => { const {actions, searchingStatus} = this.props; this.setState({value}); actions.handleSearchDraftChanged(value); @@ -171,6 +171,18 @@ class Search extends Component { actions.clearSearch(); this.scrollToTop(); } + + // FIXME: Workaround for iOS when setting the value directly + // in the inputText, bug in RN 0.48 + if (Platform.OS === 'ios' && selectionChanged) { + this.handleSelectionChange({ + nativeEvent: { + selection: { + end: value.length + } + } + }); + } }; keyModifierExtractor = (item) => { @@ -394,18 +406,35 @@ class Search extends Component { search = (terms, isOrSearch) => { const {actions, currentTeamId} = this.props; - actions.searchPosts(currentTeamId, terms, isOrSearch); + actions.searchPosts(currentTeamId, terms.trim(), isOrSearch); + + this.handleTextChanged(`${terms} `); + + // Trigger onSelectionChanged Manually when submitting + this.handleSelectionChange({ + nativeEvent: { + selection: { + end: terms.length + 1 + } + } + }); }; setModifierValue = (modifier) => { const {value} = this.state; + let newValue = ''; + if (!value) { - this.handleTextChanged(modifier); + newValue = modifier; } else if (value.endsWith(' ')) { - this.handleTextChanged(`${value}${modifier}`); + newValue = `${value}${modifier}`; } else { - this.handleTextChanged(`${value} ${modifier}`); + newValue = `${value} ${modifier}`; } + + this.handleTextChanged(newValue, true); + + this.refs.searchBar.focus(); }; setRecentValue = (recent) => { @@ -589,11 +618,6 @@ class Search extends Component { backArrowSize={28} /> - + {previewComponent} );