Show autocomplete view only when there are children (#3665)

app/components/autocomplete/autocomplete.js

@@ -13,6 +13,7 @@ import EventEmitter from 'mattermost-redux/utils/event_emitter';
 
 import {DeviceTypes} from 'app/constants';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import {emptyFunction} from 'app/utils/general';
 
 import AtMention from './at_mention';
 import ChannelMention from './channel_mention';
@@ -35,6 +36,7 @@ export default class Autocomplete extends PureComponent {
         cursorPositionEvent: PropTypes.string,
         nestedScrollEnabled: PropTypes.bool,
         expandDown: PropTypes.bool,
+        onVisible: PropTypes.func,
     };
 
     static defaultProps = {
@@ -42,6 +44,7 @@ export default class Autocomplete extends PureComponent {
         cursorPosition: 0,
         enableDateSuggestion: false,
         nestedScrollEnabled: false,
+        onVisible: emptyFunction,
     };
 
     static getDerivedStateFromProps(props, state) {
@@ -74,6 +77,8 @@ export default class Autocomplete extends PureComponent {
             keyboardOffset: 0,
             value: props.value,
         };
+
+        this.containerRef = React.createRef();
     }
 
     componentDidMount() {
@@ -102,6 +107,11 @@ export default class Autocomplete extends PureComponent {
         }
     }
 
+    componentDidUpdate() {
+        const visible = Boolean(this.containerRef.current?._children.length);
+        this.props.onVisible(visible);
+    }
+
     onChangeText = (value) => {
         this.props.onChangeText(value, true);
     };
@@ -188,7 +198,10 @@ export default class Autocomplete extends PureComponent {
 
         return (
             <View style={wrapperStyles}>
-                <View style={containerStyles}>
+                <View
+                    ref={this.containerRef}
+                    style={containerStyles}
+                >
                     <AtMention
                         {...this.props}
                         cursorPosition={cursorPosition}

app/screens/edit_post/edit_post.js

@@ -61,6 +61,7 @@ export default class EditPost extends PureComponent {
         this.state = {
             message: props.post.message,
             cursorPosition: 0,
+            autocompleteVisible: false,
         };
 
         this.rightButton.color = props.theme.sidebarHeaderTextColor;
@@ -163,9 +164,13 @@ export default class EditPost extends PureComponent {
         this.setState({cursorPosition});
     };
 
+    onAutocompleteVisible = (autocompleteVisible) => {
+        this.setState({autocompleteVisible});
+    }
+
     render() {
         const {deviceHeight, deviceWidth, theme, isLandscape} = this.props;
-        const {editing, message, error} = this.state;
+        const {editing, message, error, autocompleteVisible} = this.state;
 
         const style = getStyleSheet(theme);
 
@@ -190,6 +195,10 @@ export default class EditPost extends PureComponent {
         }
 
         const height = Platform.OS === 'android' ? (deviceHeight / 2) - 40 : (deviceHeight / 2);
+        const autocompleteStyles = [
+            style.autocompleteContainer,
+            {flex: autocompleteVisible ? 1 : 0},
+        ];
 
         return (
             <View style={style.container}>
@@ -215,13 +224,14 @@ export default class EditPost extends PureComponent {
                         />
                     </View>
                 </View>
-                <KeyboardTrackingView style={style.autocompleteContainer}>
+                <KeyboardTrackingView style={autocompleteStyles}>
                     <Autocomplete
                         cursorPosition={this.state.cursorPosition}
                         maxHeight={AUTOCOMPLETE_MAX_HEIGHT}
                         onChangeText={this.onPostChangeText}
                         value={message}
                         nestedScrollEnabled={true}
+                        onVisible={this.onAutocompleteVisible}
                     />
                 </KeyboardTrackingView>
             </View>