diff --git a/src/libs/ReportActionComposeFocusManager.js b/src/libs/ReportActionComposeFocusManager.js index 9edd46c798fe..e2aaa288ca89 100644 --- a/src/libs/ReportActionComposeFocusManager.js +++ b/src/libs/ReportActionComposeFocusManager.js @@ -1,5 +1,7 @@ import _ from 'underscore'; +import React from 'react'; +const composerRef = React.createRef(); let focusCallback = null; /** @@ -30,8 +32,20 @@ function clear() { focusCallback = null; } +/** + * Exposes the current focus state of the report action composer. + * + */ +function isFocused() { + if (composerRef.current) { + composerRef.current.isFocused(); + } +} + export default { + composerRef, onComposerFocus, focus, clear, + isFocused, }; diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index 8130c85ed813..473635e141e3 100755 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -130,6 +130,7 @@ class ReportActionCompose extends React.Component { this.onSelectionChange = this.onSelectionChange.bind(this); this.emojiPopoverAnchor = null; this.emojiSearchInput = null; + this.setTextInputRef = this.setTextInputRef.bind(this); this.state = { isFocused: this.shouldFocusInputOnScreenFocus, @@ -202,6 +203,17 @@ class ReportActionCompose extends React.Component { this.setState({isMenuVisible}); } + /** + * Set the TextInput Ref + * + * @param {Element} el + * @memberof ReportActionCompose + */ + setTextInputRef(el) { + ReportActionComposeFocusManager.composerRef.current = el; + this.textInput = el; + } + /** * Focus the composer text input */ @@ -449,7 +461,7 @@ class ReportActionCompose extends React.Component { this.textInput = el} + ref={this.setTextInputRef} textAlignVertical="top" placeholder={this.props.translate('reportActionCompose.writeSomething')} placeholderTextColor={themeColors.placeholderText} diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 39d215aed6e2..ff0641e50046 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -32,6 +32,7 @@ import withWindowDimensions, {windowDimensionsPropTypes} from '../../../componen import withDrawerState, {withDrawerPropTypes} from '../../../components/withDrawerState'; import {flatListRef, scrollToBottom} from '../../../libs/ReportScrollManager'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager'; const propTypes = { /** The ID of the report actions will be created for */ @@ -107,7 +108,11 @@ class ReportActionsView extends React.Component { componentDidMount() { AppState.addEventListener('change', this.onVisibilityChange); subscribeToReportTypingEvents(this.props.reportID); - this.keyboardEvent = Keyboard.addListener('keyboardDidShow', this.scrollToListBottom); + this.keyboardEvent = Keyboard.addListener('keyboardDidShow', () => { + if (ReportActionComposeFocusManager.isFocused()) { + this.scrollToListBottom(); + } + }); updateLastReadActionID(this.props.reportID); // Since we want the New marker to remain in place even if newer messages come in, we set it once on mount.