Skip to content

InteractionManager migration - ShareRootPage #92172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
roryabraham merged 2 commits into from
Jun 3, 2026
Merged

InteractionManager migration - ShareRootPage #92172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c5a6948
InteractionManager migration - ShareRootPage
GCyganek Jun 1, 2026
5c5f536
Delete shareTabInputRef and submitTabInputRef
GCyganek Jun 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion config/eslint/eslint.seatbelt.tsv
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -469,7 +469,6 @@
"../../src/pages/Search/SearchMoneyRequestReportPage.tsx" "@typescript-eslint/no-deprecated/InteractionManager.runAfterInteractions" 1
"../../src/pages/Search/SearchPage.tsx" "react-hooks/set-state-in-effect" 1
"../../src/pages/Search/SearchTransactionsChangeReport.tsx" "@typescript-eslint/no-deprecated/InteractionManager.runAfterInteractions" 1
"../../src/pages/Share/ShareRootPage.tsx" "@typescript-eslint/no-deprecated/InteractionManager.runAfterInteractions" 1

@roryabraham roryabraham Jun 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NAB: Manually tightening the seatbelt file isn't necessary

@GCyganek GCyganek Jun 3, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it, will keep that in mind in the new PRs

"../../src/pages/TransactionDuplicate/Confirmation.tsx" "react-hooks/refs" 12
"../../src/pages/Travel/TravelUpgrade.tsx" "react-hooks/set-state-in-effect" 1
"../../src/pages/ValidateLoginPage/index.web.tsx" "react-hooks/set-state-in-effect" 1
Expand Down
9 changes: 1 addition & 8 deletions src/components/Share/ShareTabParticipantsSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import type {Ref} from 'react';
import React, {useState} from 'react';
import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
import useOnyx from '@hooks/useOnyx';
Expand All @@ -14,20 +13,14 @@ import {validTransactionDraftIDsSelector} from '@src/selectors/TransactionDraft'

type ShareTabParticipantsSelectorProps = {
detailsPageRouteObject: typeof ROUTES.SHARE_SUBMIT_DETAILS | typeof ROUTES.SHARE_DETAILS;
ref?: Ref<InputFocusRef>;
};

type InputFocusRef = {
focus?: () => void;
};

function ShareTabParticipantsSelectorComponent({detailsPageRouteObject, ref}: ShareTabParticipantsSelectorProps) {
function ShareTabParticipantsSelectorComponent({detailsPageRouteObject}: ShareTabParticipantsSelectorProps) {
const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
const [draftTransactionIDs] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_DRAFT, {selector: validTransactionDraftIDsSelector});
const [selectedReportID, setSelectedReportID] = useState<string | number | undefined>();
return (
<MoneyRequestParticipantsSelector
ref={ref}
iouType={CONST.IOU.TYPE.SUBMIT}
initiallySelectedReportID={typeof selectedReportID === 'string' ? selectedReportID : undefined}
onParticipantsAdded={(value) => {
Expand Down
27 changes: 3 additions & 24 deletions src/pages/Share/ShareRootPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
// eslint-disable-next-line no-restricted-imports
import {Alert, AppState, InteractionManager, View} from 'react-native';
import {Alert, AppState, View} from 'react-native';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import type {AnimatedTextInputRef} from '@components/RNTextInput';
import ScreenWrapper from '@components/ScreenWrapper';
import TabNavigatorSkeleton from '@components/Skeletons/TabNavigatorSkeleton';
import TabSelector from '@components/TabSelector/TabSelector';
Expand Down Expand Up @@ -169,24 +167,6 @@ function ShareRootPage() {
[isFileReady],
);

const shareTabInputRef = useRef<AnimatedTextInputRef | null>(null);
const submitTabInputRef = useRef<AnimatedTextInputRef | null>(null);

// We're focusing the input using internal onPageSelected to fix input focus inconsistencies on native.
// More info: https://github.com/Expensify/App/issues/59388
const onTabSelectFocusHandler = ({index}: {index: number}) => {
// We runAfterInteractions since the function is called in the animate block on web-based
// implementation, this fixes an animation glitch and matches the native internal delay
InteractionManager.runAfterInteractions(() => {
// Chat tab (0) / Room tab (1) according to OnyxTabNavigator (see below)
if (index === 0) {
shareTabInputRef.current?.focus();
} else if (index === 1) {
submitTabInputRef.current?.focus();
}
});
};

return (
<ScreenWrapper
includeSafeAreaPaddingBottom
Expand All @@ -205,10 +185,9 @@ function ShareRootPage() {
tabBar={TabSelector}
defaultSelectedTab={isFileScannable ? CONST.TAB.SHARE.SUBMIT : CONST.TAB.SHARE.SHARE}
lazyLoadEnabled
Comment thread
GCyganek marked this conversation as resolved.
onTabSelect={onTabSelectFocusHandler}
>
<TopTab.Screen name={CONST.TAB.SHARE.SHARE}>{() => <ShareTab ref={shareTabInputRef} />}</TopTab.Screen>
{isFileScannable && <TopTab.Screen name={CONST.TAB.SHARE.SUBMIT}>{() => <SubmitTab ref={submitTabInputRef} />}</TopTab.Screen>}
<TopTab.Screen name={CONST.TAB.SHARE.SHARE}>{() => <ShareTab />}</TopTab.Screen>
{isFileScannable && <TopTab.Screen name={CONST.TAB.SHARE.SUBMIT}>{() => <SubmitTab />}</TopTab.Screen>}
</OnyxTabNavigator>
) : (
<TabNavigatorSkeleton reasonAttributes={reasonAttributes} />
Expand Down
21 changes: 2 additions & 19 deletions src/pages/Share/ShareTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import type {Ref} from 'react';
import React, {useEffect, useImperativeHandle, useRef, useState} from 'react';
import React, {useEffect, useState} from 'react';
import {View} from 'react-native';
import {usePersonalDetails} from '@components/OnyxListItemProvider';
import SelectionList from '@components/SelectionList';
import InviteMemberListItem from '@components/SelectionList/ListItem/InviteMemberListItem';
import type {ListItem, SelectionListHandle} from '@components/SelectionList/types';
import Text from '@components/Text';
import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
import useDebouncedState from '@hooks/useDebouncedState';
Expand Down Expand Up @@ -33,22 +31,12 @@ const defaultListOptions = {
categoryOptions: [],
};

type ShareTabRef = {
focus?: () => void;
};

type ShareTabProps = {
/** Reference to the outer element */
ref?: Ref<ShareTabRef>;
};

function ShareTab({ref}: ShareTabProps) {
function ShareTab() {
const styles = useThemeStyles();
const {translate} = useLocalize();
const {isOffline} = useNetwork();
const [textInputValue, debouncedTextInputValue, setTextInputValue] = useDebouncedState('');
const [betas] = useOnyx(ONYXKEYS.BETAS);
const selectionListRef = useRef<SelectionListHandle<ListItem> | null>(null);
const [selectedReportID, setSelectedReportID] = useState<string | number | undefined>();
const [countryCode = CONST.DEFAULT_COUNTRY_CODE] = useOnyx(ONYXKEYS.COUNTRY_CODE);
const [loginList] = useOnyx(ONYXKEYS.LOGIN_LIST);
Expand All @@ -61,9 +49,6 @@ function ShareTab({ref}: ShareTabProps) {
const currentUserAccountID = currentUserPersonalDetails.accountID;
const currentUserEmail = currentUserPersonalDetails.email ?? '';
const personalDetails = usePersonalDetails();
useImperativeHandle(ref, () => ({
focus: selectionListRef.current?.focusTextInput,
}));

const {didScreenTransitionEnd} = useScreenWrapperTransitionStatus();
const {options: listOptions, isLoading} = useFilteredOptions({
Expand Down Expand Up @@ -157,7 +142,6 @@ function ShareTab({ref}: ShareTabProps) {
hint: offlineMessage,
onChangeText: setTextInputValue,
headerMessage: header,
disableAutoFocus: true,
};

const customListHeader =
Expand All @@ -178,7 +162,6 @@ function ShareTab({ref}: ShareTabProps) {
shouldSingleExecuteRowSelect
onSelectRow={onSelectRow}
isLoadingNewOptions={!!isSearchingForReports}
ref={selectionListRef}
/>
);
}
Expand Down
19 changes: 2 additions & 17 deletions src/pages/Share/SubmitTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,9 @@
import React from 'react';
import type {Ref} from 'react';
import ShareTabParticipantsSelector from '@components/Share/ShareTabParticipantsSelector';
import ROUTES from '@src/ROUTES';

type InputFocusRef = {
focus?: () => void;
};

type SubmitTabProps = {
/** Reference to the outer element */
ref?: Ref<InputFocusRef>;
};

function SubmitTabComponent({ref}: SubmitTabProps) {
return (
<ShareTabParticipantsSelector
ref={ref}
detailsPageRouteObject={ROUTES.SHARE_SUBMIT_DETAILS}
/>
);
function SubmitTabComponent() {
return <ShareTabParticipantsSelector detailsPageRouteObject={ROUTES.SHARE_SUBMIT_DETAILS} />;
}

const SubmitTab = SubmitTabComponent;
Expand Down
Loading