diff --git a/src/pages/iou/request/IOURequestStartPage.tsx b/src/pages/iou/request/IOURequestStartPage.tsx index ad31274e5e2c5..755cc80921283 100644 --- a/src/pages/iou/request/IOURequestStartPage.tsx +++ b/src/pages/iou/request/IOURequestStartPage.tsx @@ -69,7 +69,9 @@ function IOURequestStartPage({ const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {canBeMissing: true}); const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report?.parentReportID}`, {canBeMissing: true}); const policy = usePolicy(report?.policyID); - const [selectedTab, selectedTabResult] = useOnyx(`${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.IOU_REQUEST_TYPE}`, {canBeMissing: true}); + const [lastSelectedTab, selectedTabResult] = useOnyx(`${ONYXKEYS.COLLECTION.SELECTED_TAB}${CONST.TAB.IOU_REQUEST_TYPE}`, {canBeMissing: true}); + const [selectedTab, setSelectedTab] = useState(lastSelectedTab); + const isLoadingSelectedTab = shouldUseTab ? isLoadingOnyxValue(selectedTabResult) : false; const [transaction, transactionResult] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${getNonEmptyStringOnyxID(route?.params.transactionID)}`, {canBeMissing: true}); const isLoadingTransaction = isLoadingOnyxValue(transactionResult); @@ -135,6 +137,16 @@ function IOURequestStartPage({ Performance.markEnd(CONST.TIMING.OPEN_CREATE_EXPENSE); }, []); + useEffect(() => { + if (isLoadingSelectedTab || selectedTab) { + return; + } + setSelectedTab(lastSelectedTab); + // We only want to set the selected tab when selectedTab is not set yet, don't want to run this effect again when lastSelectedTab changes + // eslint-disable-next-line react-compiler/react-compiler + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isLoadingSelectedTab, selectedTab]); + const navigateBack = () => { Navigation.closeRHPFlow(); }; @@ -177,6 +189,14 @@ function IOURequestStartPage({ ], ); + const onTabSelected = useCallback( + (newIouType: IOURequestType) => { + setSelectedTab(newIouType); + resetIOUTypeIfChanged(newIouType); + }, + [resetIOUTypeIfChanged], + ); + // Clear out the temporary expense if the reportID in the URL has changed from the transaction's reportID. useFocusEffect( useCallback(() => { @@ -253,7 +273,7 @@ function IOURequestStartPage({