🍒 Cherry pick PR #17475 to staging 🍒

android/app/build.gradle

@@ -106,8 +106,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001030001
-        versionName "1.3.0-1"
+        versionCode 1001030002
+        versionName "1.3.0-2"
     }
 
     splits {

ios/NewExpensify/Info.plist

@@ -30,7 +30,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.0.1</string>
+	<string>1.3.0.2</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -19,6 +19,6 @@
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.0.1</string>
+	<string>1.3.0.2</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.0-1",
+  "version": "1.3.0-2",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/EmojiPicker/EmojiPickerButton.js

@@ -36,7 +36,7 @@ const EmojiPickerButton = (props) => {
                     StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)),
                 ])}
                 disabled={props.isDisabled}
-                onPress={() => EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor, undefined, props.onWillShow)}
+                onPress={() => EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor)}
                 nativeID={props.nativeID}
             >
                 {({hovered, pressed}) => (

src/pages/home/report/ReportActionCompose/index.js → src/pages/home/report/ReportActionCompose.js

@@ -9,49 +9,49 @@ import {
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
-import styles from '../../../../styles/styles';
-import themeColors from '../../../../styles/themes/default';
-import Composer from '../../../../components/Composer';
-import ONYXKEYS from '../../../../ONYXKEYS';
-import Icon from '../../../../components/Icon';
-import * as Expensicons from '../../../../components/Icon/Expensicons';
-import AttachmentPicker from '../../../../components/AttachmentPicker';
-import * as Report from '../../../../libs/actions/Report';
-import ReportTypingIndicator from '../ReportTypingIndicator';
-import AttachmentModal from '../../../../components/AttachmentModal';
-import compose from '../../../../libs/compose';
-import PopoverMenu from '../../../../components/PopoverMenu';
-import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions';
-import withDrawerState from '../../../../components/withDrawerState';
-import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
-import willBlurTextInputOnTapOutside from '../../../../libs/willBlurTextInputOnTapOutside';
-import CONST from '../../../../CONST';
-import Navigation from '../../../../libs/Navigation/Navigation';
-import ROUTES from '../../../../ROUTES';
-import reportActionPropTypes from '../reportActionPropTypes';
-import * as ReportUtils from '../../../../libs/ReportUtils';
-import ReportActionComposeFocusManager from '../../../../libs/ReportActionComposeFocusManager';
-import participantPropTypes from '../../../../components/participantPropTypes';
-import ParticipantLocalTime from '../ParticipantLocalTime';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../../components/withCurrentUserPersonalDetails';
-import {withNetwork, withPersonalDetails} from '../../../../components/OnyxProvider';
-import * as User from '../../../../libs/actions/User';
-import Tooltip from '../../../../components/Tooltip';
-import EmojiPickerButton from '../../../../components/EmojiPicker/EmojiPickerButton';
-import * as DeviceCapabilities from '../../../../libs/DeviceCapabilities';
-import toggleReportActionComposeView from '../../../../libs/toggleReportActionComposeView';
-import OfflineIndicator from '../../../../components/OfflineIndicator';
-import ExceededCommentLength from '../../../../components/ExceededCommentLength';
-import withNavigationFocus from '../../../../components/withNavigationFocus';
-import * as EmojiUtils from '../../../../libs/EmojiUtils';
-import ReportDropUI from '../ReportDropUI';
-import DragAndDrop from '../../../../components/DragAndDrop';
-import reportPropTypes from '../../../reportPropTypes';
-import EmojiSuggestions from '../../../../components/EmojiSuggestions';
-import withKeyboardState, {keyboardStatePropTypes} from '../../../../components/withKeyboardState';
-import ArrowKeyFocusManager from '../../../../components/ArrowKeyFocusManager';
-import KeyboardShortcut from '../../../../libs/KeyboardShortcut';
-import KeyDownAction from './keyDownAction';
+import styles from '../../../styles/styles';
+import themeColors from '../../../styles/themes/default';
+import Composer from '../../../components/Composer';
+import ONYXKEYS from '../../../ONYXKEYS';
+import Icon from '../../../components/Icon';
+import * as Expensicons from '../../../components/Icon/Expensicons';
+import AttachmentPicker from '../../../components/AttachmentPicker';
+import * as Report from '../../../libs/actions/Report';
+import ReportTypingIndicator from './ReportTypingIndicator';
+import AttachmentModal from '../../../components/AttachmentModal';
+import compose from '../../../libs/compose';
+import PopoverMenu from '../../../components/PopoverMenu';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
+import withDrawerState from '../../../components/withDrawerState';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import willBlurTextInputOnTapOutside from '../../../libs/willBlurTextInputOnTapOutside';
+import CONST from '../../../CONST';
+import Navigation from '../../../libs/Navigation/Navigation';
+import ROUTES from '../../../ROUTES';
+import reportActionPropTypes from './reportActionPropTypes';
+import * as ReportUtils from '../../../libs/ReportUtils';
+import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
+import participantPropTypes from '../../../components/participantPropTypes';
+import ParticipantLocalTime from './ParticipantLocalTime';
+import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsPropTypes, withCurrentUserPersonalDetailsDefaultProps} from '../../../components/withCurrentUserPersonalDetails';
+import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider';
+import * as User from '../../../libs/actions/User';
+import Tooltip from '../../../components/Tooltip';
+import EmojiPickerButton from '../../../components/EmojiPicker/EmojiPickerButton';
+import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
+import toggleReportActionComposeView from '../../../libs/toggleReportActionComposeView';
+import OfflineIndicator from '../../../components/OfflineIndicator';
+import ExceededCommentLength from '../../../components/ExceededCommentLength';
+import withNavigationFocus from '../../../components/withNavigationFocus';
+import * as EmojiUtils from '../../../libs/EmojiUtils';
+import ReportDropUI from './ReportDropUI';
+import DragAndDrop from '../../../components/DragAndDrop';
+import reportPropTypes from '../../reportPropTypes';
+import EmojiSuggestions from '../../../components/EmojiSuggestions';
+import withKeyboardState, {keyboardStatePropTypes} from '../../../components/withKeyboardState';
+import ArrowKeyFocusManager from '../../../components/ArrowKeyFocusManager';
+import OfflineWithFeedback from '../../../components/OfflineWithFeedback';
+import KeyboardShortcut from '../../../libs/KeyboardShortcut';
 
 const propTypes = {
     /** Beta features list */
@@ -164,8 +164,6 @@ class ReportActionCompose extends React.Component {
         this.setIsFullComposerAvailable = this.setIsFullComposerAvailable.bind(this);
         this.focus = this.focus.bind(this);
         this.addEmojiToTextBox = this.addEmojiToTextBox.bind(this);
-        this.replaceSelectionWithInput = this.replaceSelectionWithInput.bind(this);
-        this.keydownListener = this.keydownListener.bind(this);
         this.onSelectionChange = this.onSelectionChange.bind(this);
         this.isEmojiCode = this.isEmojiCode.bind(this);
         this.setTextInputRef = this.setTextInputRef.bind(this);
@@ -204,13 +202,10 @@ class ReportActionCompose extends React.Component {
             isEmojiPickerLarge: false,
             composerHeight: 0,
             hasExceededMaxCommentLength: false,
-            isEmojiPickerVisible: false,
         };
     }
 
     componentDidMount() {
-        KeyDownAction.listenKeyDown(this.keydownListener);
-
         // This callback is used in the contextMenuActions to manage giving focus back to the compose input.
         // TODO: we should clean up this convoluted code and instead move focus management to something like ReportFooter.js or another higher up component
         ReportActionComposeFocusManager.onComposerFocus(() => {
@@ -266,9 +261,6 @@ class ReportActionCompose extends React.Component {
     }
 
     componentWillUnmount() {
-        if (this.keydownListener) {
-            KeyDownAction.removeListenKeyDown(this.keydownListener);
-        }
         ReportActionComposeFocusManager.clear();
 
         if (this.unsubscribeEscapeKey) {
@@ -474,53 +466,23 @@ class ReportActionCompose extends React.Component {
         return _.size(this.props.reportActions) === 1;
     }
 
-    keydownListener(e) {
-        if (this.state.isFocused || this.state.isEmojiPickerVisible || this.props.modal.isVisible || this.props.isSmallScreenWidth) {
-            return;
-        }
-
-        // If the key pressed is non-character keys like Enter, Shift, ... do not focus
-        if (e.key.length > 1) {
-            return;
-        }
-
-        // If a key is pressed in combination with Meta, Control or Alt do not focus
-        if (e.metaKey || e.ctrlKey || e.altKey) {
-            return;
-        }
-
-        // If we're typing on another input/text area, do not focus
-        if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA') {
-            return;
-        }
-
-        this.focus();
-        this.replaceSelectionWithInput(e.key);
-    }
-
-    /**
-     * @param {String} text
-     */
-    replaceSelectionWithInput(text) {
-        const newComment = this.comment.slice(0, this.state.selection.start)
-            + text
-            + this.comment.slice(this.state.selection.end, this.comment.length);
-        this.setState(prevState => ({
-            selection: {
-                start: prevState.selection.start + text.length,
-                end: prevState.selection.start + text.length,
-            },
-        }), this.updateComment(newComment));
-    }
-
     /**
      * Callback for the emoji picker to add whatever emoji is chosen into the main input
      *
      * @param {String} emoji
      */
     addEmojiToTextBox(emoji) {
         const emojiWithSpace = `${emoji} `;
-        this.replaceSelectionWithInput(emojiWithSpace);
+        const newComment = this.comment.slice(0, this.state.selection.start)
+            + emojiWithSpace
+            + this.comment.slice(this.state.selection.end, this.comment.length);
+        this.setState(prevState => ({
+            selection: {
+                start: prevState.selection.start + emojiWithSpace.length,
+                end: prevState.selection.start + emojiWithSpace.length,
+            },
+        }));
+        this.updateComment(newComment);
     }
 
     /**
@@ -911,10 +873,8 @@ class ReportActionCompose extends React.Component {
                             isDisabled={isBlockedFromConcierge || this.props.disabled}
                             onModalHide={() => {
                                 this.focus(true);
-                                this.setState({isEmojiPickerVisible: false});
                             }}
                             onEmojiSelected={this.addEmojiToTextBox}
-                            onWillShow={() => this.setState({isEmojiPickerVisible: true})}
                         />
                     )}
                     <View