diff --git a/src/components/DisplayNames/DisplayNamesWithTooltip.js b/src/components/DisplayNames/DisplayNamesWithTooltip.js index 77e3319af266..c8a3a3a1f37f 100644 --- a/src/components/DisplayNames/DisplayNamesWithTooltip.js +++ b/src/components/DisplayNames/DisplayNamesWithTooltip.js @@ -51,7 +51,7 @@ function DisplayNamesWithToolTip(props) { return ( // Tokenization of string only support prop numberOfLines on Web (containerRef.current = el)} > diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index a3fbb5e41378..89f41666df2d 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -78,8 +78,8 @@ function OptionRowLHN(props) { const displayNameStyle = StyleUtils.combineStyles([styles.optionDisplayName, styles.optionDisplayNameCompact, styles.pre, ...textUnreadStyle], props.style); const alternateTextStyle = StyleUtils.combineStyles( props.viewMode === CONST.OPTION_MODE.COMPACT - ? [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2] - : [textStyle, styles.optionAlternateText, styles.pre, styles.textLabelSupporting], + ? [textStyle, styles.optionAlternateText, styles.noWrap, styles.textLabelSupporting, styles.optionAlternateTextCompact, styles.ml2] + : [textStyle, styles.optionAlternateText, styles.noWrap, styles.textLabelSupporting], props.style, ); const contentContainerStyles = diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js index ffd65cfb8f74..7c775990922c 100755 --- a/src/components/MoneyRequestConfirmationList.js +++ b/src/components/MoneyRequestConfirmationList.js @@ -357,6 +357,7 @@ function MoneyRequestConfirmationList(props) { style={[styles.moneyRequestMenuItem, styles.mb2]} titleStyle={styles.flex1} disabled={didConfirm || props.isReadOnly} + numberOfLinesTitle={2} /> {!showAllFields && ( diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 7273616ea57e..ab17c5de322d 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -64,41 +64,20 @@ 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, - ); + this.subscribeToKeyboardShortcut(); this.scrollToIndex(this.props.selectedOptions.length ? 0 : this.state.focusedIndex, false); } componentDidUpdate(prevProps) { + if (prevProps.isFocused !== this.props.isFocused) { + if (this.props.isFocused) { + this.subscribeToKeyboardShortcut(); + } else { + this.unSubscribeFromKeyboardShortcut(); + } + } + 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 +127,7 @@ class BaseOptionsSelector extends Component { clearTimeout(this.focusTimeout); } - if (this.unsubscribeEnter) { - this.unsubscribeEnter(); - } - - if (this.unsubscribeCTRLEnter) { - this.unsubscribeCTRLEnter(); - } + this.unSubscribeFromKeyboardShortcut(); } /** @@ -179,6 +152,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, + ); + } + + unSubscribeFromKeyboardShortcut() { + if (this.unsubscribeEnter) { + this.unsubscribeEnter(); + } + + if (this.unsubscribeCTRLEnter) { + this.unsubscribeCTRLEnter(); + } + } + selectFocusedOption() { const focusedOption = this.state.allOptions[this.state.focusedIndex]; diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js index e7a66bca8bba..643b77987364 100644 --- a/src/components/ReportActionItem/MoneyRequestPreview.js +++ b/src/components/ReportActionItem/MoneyRequestPreview.js @@ -256,7 +256,7 @@ function MoneyRequestPreview(props) { {!props.isBillSplit && !_.isEmpty(requestMerchant) && ( - {requestMerchant} + {requestMerchant} )} diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js index 2e6e459f1d96..3cba0d51660f 100644 --- a/src/pages/iou/MoneyRequestDescriptionPage.js +++ b/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}) { inputRef.current && inputRef.current.focus()} + onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(inputRef.current)} > (inputRef.current = el)} + autoGrowHeight + containerStyles={[styles.autoGrowHeightMultilineInput]} + textAlignVertical="top" + submitOnEnter={!Browser.isMobile()} />