diff --git a/app/components/autocomplete/autocomplete.js b/app/components/autocomplete/autocomplete.js index 09555c7a6..d0174ba52 100644 --- a/app/components/autocomplete/autocomplete.js +++ b/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 ( - + { + 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 ( @@ -215,13 +224,14 @@ export default class EditPost extends PureComponent { /> - +