Merge pull request #27294 from tienifr/fix/27202

Fix: App loses focus on money request participant selector's text input
Expensify · Sep 13, 2023 · 2f2c46b · 2f2c46b
2 parents ea8dcd0 + 54f0ee6
commit 2f2c46b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js
@@ -49,6 +49,7 @@ function MoneyRequestParticipantsPage(props) {
     const prevMoneyRequestId = useRef(props.iou.id);
     const iouType = useRef(lodashGet(props.route, 'params.iouType', ''));
     const reportID = useRef(lodashGet(props.route, 'params.reportID', ''));
+    const optionsSelectorRef = useRef();
     const isDistanceRequest = MoneyRequestUtils.isDistanceRequest(iouType.current, props.selectedTab);
 
     const navigateToNextStep = () => {
@@ -88,6 +89,7 @@ function MoneyRequestParticipantsPage(props) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight={DeviceCapabilities.canUseTouchScreen()}
+            onEntryTransitionEnd={() => optionsSelectorRef.current && optionsSelectorRef.current.focus()}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <View style={styles.flex1}>
@@ -104,6 +106,7 @@ function MoneyRequestParticipantsPage(props) {
                         />
                     ) : (
                         <MoneyRequestParticipantsSelector
+                            ref={(el) => (optionsSelectorRef.current = el)}
                             onStepComplete={navigateToNextStep}
                             onAddParticipants={IOU.setMoneyRequestParticipants}
                             safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}

diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -11,11 +11,15 @@ import compose from '../../../../libs/compose';
 import CONST from '../../../../CONST';
 import personalDetailsPropType from '../../../personalDetailsPropType';
 import reportPropTypes from '../../../reportPropTypes';
+import refPropTypes from '../../../../components/refPropTypes';
 
 const propTypes = {
     /** Beta features list */
     betas: PropTypes.arrayOf(PropTypes.string),
 
+    /** A ref to forward to options selector's text input */
+    forwardedRef: refPropTypes,
+
     /** Callback to inform parent modal of success */
     onStepComplete: PropTypes.func.isRequired,
 
@@ -41,6 +45,7 @@ const propTypes = {
 };
 
 const defaultProps = {
+    forwardedRef: undefined,
     safeAreaPaddingBottomStyle: {},
     personalDetails: {},
     reports: {},
@@ -161,6 +166,8 @@ class MoneyRequestParticipantsSelector extends Component {
 
         return (
             <OptionsSelector
+                ref={this.props.forwardedRef}
+                autoFocus={false}
                 sections={this.getSections()}
                 value={this.state.searchTerm}
                 onSelectRow={this.addSingleParticipant}
@@ -191,4 +198,12 @@ export default compose(
             key: ONYXKEYS.BETAS,
         },
     }),
-)(MoneyRequestParticipantsSelector);
+)(
+    React.forwardRef((props, ref) => (
+        <MoneyRequestParticipantsSelector
+            /* eslint-disable-next-line react/jsx-props-no-spreading */
+            {...props}
+            forwardedRef={ref}
+        />
+    )),
+);