allow Request money 'Description' to accept multiline

src/components/DisplayNames/DisplayNamesWithTooltip.js

@@ -51,7 +51,7 @@ function DisplayNamesWithToolTip(props) {
     return (
         // Tokenization of string only support prop numberOfLines on Web
         <Text
-            style={[...props.textStyles, styles.pRelative]}
+            style={[...props.textStyles, styles.pRelative, props.numberOfLines === 1 ? styles.noWrap : {}]}
             numberOfLines={props.numberOfLines || undefined}
             ref={(el) => (containerRef.current = el)}
         >

src/components/MoneyRequestConfirmationList.js

@@ -324,7 +324,7 @@ function MoneyRequestConfirmationList(props) {
             onConfirmSelection={confirm}
             selectedOptions={selectedOptions}
             canSelectMultipleOptions={canModifyParticipants}
-            disableArrowKeysActions={!canModifyParticipants}
+            disableArrowKeysActions={props.disableArrowKeysActions || !canModifyParticipants}
             boldStyle
             showTitleTooltip
             shouldTextInputAppearBelowOptions
@@ -357,6 +357,7 @@ function MoneyRequestConfirmationList(props) {
                 style={[styles.moneyRequestMenuItem, styles.mb2]}
                 titleStyle={styles.flex1}
                 disabled={didConfirm || props.isReadOnly}
+                numberOfLinesTitle={2}
             />
             {!showAllFields && (
                 <View style={[styles.flexRow, styles.justifyContentBetween, styles.mh3, styles.alignItemsCenter]}>

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -64,41 +64,22 @@ class BaseOptionsSelector extends Component {
     }
 
     componentDidMount() {
-        const enterConfig = CONST.KEYBOARD_SHORTCUTS.ENTER;
-        this.unsubscribeEnter = KeyboardShortcut.subscribe(
-            enterConfig.shortcutKey,
-            this.selectFocusedOption,
-            enterConfig.descriptionKey,
-            enterConfig.modifiers,
-            true,
-            () => !this.state.allOptions[this.state.focusedIndex],
-        );
-
-        const CTRLEnterConfig = CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER;
-        this.unsubscribeCTRLEnter = KeyboardShortcut.subscribe(
-            CTRLEnterConfig.shortcutKey,
-            () => {
-                if (this.props.canSelectMultipleOptions) {
-                    this.props.onConfirmSelection();
-                    return;
-                }
-
-                const focusedOption = this.state.allOptions[this.state.focusedIndex];
-                if (!focusedOption) {
-                    return;
-                }
-
-                this.selectRow(focusedOption);
-            },
-            CTRLEnterConfig.descriptionKey,
-            CTRLEnterConfig.modifiers,
-            true,
-        );
+        if (!this.props.disableArrowKeysActions) {
+            this.subscribeToKeyboardShortcut();
+        }
 
         this.scrollToIndex(this.props.selectedOptions.length ? 0 : this.state.focusedIndex, false);
     }
 
     componentDidUpdate(prevProps) {
+        if (prevProps.disableArrowKeysActions !== this.props.disableArrowKeysActions) {
+            if (this.props.disableArrowKeysActions) {
+                this.unSubscribeToKeyboardShortcut();
+            } else {
+                this.subscribeToKeyboardShortcut();
+            }
+        }
+
         if (this.textInput && this.props.autoFocus && !prevProps.isFocused && this.props.isFocused) {
             InteractionManager.runAfterInteractions(() => {
                 // If we automatically focus on a text input when mounting a component,
@@ -148,13 +129,7 @@ class BaseOptionsSelector extends Component {
             clearTimeout(this.focusTimeout);
         }
 
-        if (this.unsubscribeEnter) {
-            this.unsubscribeEnter();
-        }
-
-        if (this.unsubscribeCTRLEnter) {
-            this.unsubscribeCTRLEnter();
-        }
+        this.unSubscribeToKeyboardShortcut();
     }
 
     /**
@@ -179,6 +154,49 @@ class BaseOptionsSelector extends Component {
         return defaultIndex;
     }
 
+    subscribeToKeyboardShortcut() {
+        const enterConfig = CONST.KEYBOARD_SHORTCUTS.ENTER;
+        this.unsubscribeEnter = KeyboardShortcut.subscribe(
+            enterConfig.shortcutKey,
+            this.selectFocusedOption,
+            enterConfig.descriptionKey,
+            enterConfig.modifiers,
+            true,
+            () => !this.state.allOptions[this.state.focusedIndex],
+        );
+
+        const CTRLEnterConfig = CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER;
+        this.unsubscribeCTRLEnter = KeyboardShortcut.subscribe(
+            CTRLEnterConfig.shortcutKey,
+            () => {
+                if (this.props.canSelectMultipleOptions) {
+                    this.props.onConfirmSelection();
+                    return;
+                }
+
+                const focusedOption = this.state.allOptions[this.state.focusedIndex];
+                if (!focusedOption) {
+                    return;
+                }
+
+                this.selectRow(focusedOption);
+            },
+            CTRLEnterConfig.descriptionKey,
+            CTRLEnterConfig.modifiers,
+            true,
+        );
+    }
+
+    unSubscribeToKeyboardShortcut() {
+        if (this.unsubscribeEnter) {
+            this.unsubscribeEnter();
+        }
+
+        if (this.unsubscribeCTRLEnter) {
+            this.unsubscribeCTRLEnter();
+        }
+    }
+
     selectFocusedOption() {
         const focusedOption = this.state.allOptions[this.state.focusedIndex];
 

src/components/ReportActionItem/MoneyRequestPreview.js

@@ -256,7 +256,7 @@ function MoneyRequestPreview(props) {
                         </View>
                         {!props.isBillSplit && !_.isEmpty(requestMerchant) && (
                             <View style={[styles.flexRow]}>
-                                <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh16]}>{requestMerchant}</Text>
+                                <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh16, styles.breakWord]}>{requestMerchant}</Text>
                             </View>
                         )}
                         <View style={[styles.flexRow]}>

src/libs/actions/IOU.js

@@ -116,7 +116,7 @@ function buildOnyxDataForMoneyRequest(
             key: `${ONYXKEYS.COLLECTION.REPORT}${iouReport.reportID}`,
             value: {
                 ...iouReport,
-                lastMessageText: iouAction.message[0].text,
+                lastMessageText: ReportUtils.formatReportLastMessageText(iouAction.message[0].text),
                 lastMessageHtml: iouAction.message[0].html,
                 ...(isNewIOUReport ? {pendingFields: {createChat: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD}} : {}),
             },

src/pages/iou/MoneyRequestDescriptionPage.js

@@ -16,6 +16,8 @@ import * as IOU from '../../libs/actions/IOU';
 import optionPropTypes from '../../components/optionPropTypes';
 import CONST from '../../CONST';
 import useLocalize from '../../hooks/useLocalize';
+import focusAndUpdateMultilineInputRange from '../../libs/focusAndUpdateMultilineInputRange';
+import * as Browser from '../../libs/Browser';
 
 const propTypes = {
     /** Onyx Props */
@@ -88,7 +90,7 @@ function MoneyRequestDescriptionPage({iou, route}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
+            onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(inputRef.current)}
         >
             <HeaderWithBackButton
                 title={translate('common.description')}
@@ -110,6 +112,10 @@ function MoneyRequestDescriptionPage({iou, route}) {
                         accessibilityLabel={translate('moneyRequestConfirmationList.whatsItFor')}
                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                         ref={(el) => (inputRef.current = el)}
+                        autoGrowHeight
+                        containerStyles={[styles.autoGrowHeightMultilineInput]}
+                        textAlignVertical="top"
+                        submitOnEnter={!Browser.isMobile()}
                     />
                 </View>
             </Form>

src/pages/iou/steps/MoneyRequestConfirmPage.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
+import {useIsFocused} from '@react-navigation/native';
 import MoneyRequestConfirmationList from '../../../components/MoneyRequestConfirmationList';
 import CONST from '../../../CONST';
 import ScreenWrapper from '../../../components/ScreenWrapper';
@@ -79,6 +80,8 @@ function MoneyRequestConfirmPage(props) {
         [props.iou.participants, props.personalDetails],
     );
 
+    const isFocused = useIsFocused();
+
     useEffect(() => {
         const policyExpenseChat = _.find(participants, (participant) => participant.isPolicyExpenseChat);
         if (policyExpenseChat) {
@@ -266,6 +269,7 @@ function MoneyRequestConfirmPage(props) {
                         bankAccountRoute={ReportUtils.getBankAccountRoute(props.report)}
                         iouMerchant={props.iou.merchant}
                         iouCreated={props.iou.created}
+                        disableArrowKeysActions={!isFocused}
                     />
                 </View>
             )}