Merge pull request #6138 from parasharrajat/edit-keyboard

Remove autofocus from the Edit messages and focus on the manual action
Expensify · Nov 4, 2021 · 6d1979b · 6d1979b
2 parents f91e49c + 7b10558
commit 6d1979b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -80,6 +80,13 @@ class ReportActionItem extends Component {
             || this.state.isContextMenuActive !== nextState.isContextMenuActive;
     }
 
+    componentDidUpdate(prevProps) {
+        if (!prevProps.draftMessage && this.props.draftMessage) {
+            // Only focus the input when user edits a message, skip it for existing drafts being edited of the report.
+            this.textInput.focus();
+        }
+    }
+
     /**
      * Show the ReportActionContextMenu modal popover.
      *
@@ -127,6 +134,7 @@ class ReportActionItem extends Component {
                             draftMessage={this.props.draftMessage}
                             reportID={this.props.reportID}
                             index={this.props.index}
+                            ref={el => this.textInput = el}
                     />
                 );
         }

diff --git a/src/pages/home/report/ReportActionItemMessageEdit.js b/src/pages/home/report/ReportActionItemMessageEdit.js
@@ -28,13 +28,20 @@ const propTypes = {
     /** Position index of the report action in the overall report FlatList view */
     index: PropTypes.number.isRequired,
 
+    /** A ref to forward to the text input */
+    forwardedRef: PropTypes.func,
+
     /** Window Dimensions Props */
     ...windowDimensionsPropTypes,
 
     /** Localization props */
     ...withLocalizePropTypes,
 };
 
+const defaultProps = {
+    forwardedRef: () => {},
+};
+
 class ReportActionItemMessageEdit extends React.Component {
     constructor(props) {
         super(props);
@@ -125,7 +132,10 @@ class ReportActionItemMessageEdit extends React.Component {
                 <View style={[styles.chatItemComposeBox, styles.flexRow, styles.chatItemComposeBoxColor]}>
                     <TextInputFocusable
                         multiline
-                        ref={el => this.textInput = el}
+                        ref={(el) => {
+                            this.textInput = el;
+                            this.props.forwardedRef(el);
+                        }}
                         onChangeText={this.updateDraft} // Debounced saveDraftComment
                         onKeyPress={this.triggerSaveOrCancel}
                         defaultValue={this.state.draft}
@@ -135,7 +145,6 @@ class ReportActionItemMessageEdit extends React.Component {
                             scrollToIndex({animated: true, index: this.props.index}, true);
                             toggleReportActionComposeView(false);
                         }}
-                        autoFocus
                         selection={this.state.selection}
                         onSelectionChange={this.onSelectionChange}
                     />
@@ -161,7 +170,11 @@ class ReportActionItemMessageEdit extends React.Component {
 }
 
 ReportActionItemMessageEdit.propTypes = propTypes;
+ReportActionItemMessageEdit.defaultProps = defaultProps;
 export default compose(
     withLocalize,
     withWindowDimensions,
-)(ReportActionItemMessageEdit);
+)(React.forwardRef((props, ref) => (
+    /* eslint-disable-next-line react/jsx-props-no-spreading */
+    <ReportActionItemMessageEdit {...props} forwardedRef={ref} />
+)));