Merge pull request #3551 from parasharrajat/actionList

fixed scrolling when focusing on the edit box for old message
Expensify · Jun 14, 2021 · 35d0848 · 35d0848
2 parents 7186caf + 981419c
commit 35d0848
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git 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
@@ -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 {
                                 <TextInputFocusable
                                     autoFocus={this.shouldFocusInputOnScreenFocus}
                                     multiline
-                                    ref={el => 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
@@ -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.