Skip to content

Stop scroll jump on workspace invite member selection #91250

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
francoisl merged 15 commits into from
May 21, 2026
+315 −9
Merged

Stop scroll jump on workspace invite member selection #91250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
1aef112
Stop scrolling and jumping when selecting items on workspace invite page
MelvinBot May 20, 2026
ab2c161
Keep selected non-existing users visible in top section
MelvinBot May 21, 2026
2045392
Remove initiallyFocusedKey from DynamicWorkspaceInvitePage
MelvinBot May 21, 2026
231b758
Remove useMemo from selectedNonExistingUsers
MelvinBot May 21, 2026
a9ef427
Fix unstable selectedNonExistingUsers causing excessive re-renders
MelvinBot May 21, 2026
f3c4143
Hide userToInvite section when user is already selected
MelvinBot May 21, 2026
c893bb3
Filter selected non-existing users by search term
MelvinBot May 21, 2026
a005d57
Move selectedNonExistingOptions logic into useSearchSelectorBase
MelvinBot May 21, 2026
256ecf4
Add missing shouldUpdateFocusedIndex prop
MelvinBot May 21, 2026
bb41770
Make selectedNonExistingOptions optional in UseSearchSelectorReturn
MelvinBot May 21, 2026
80414ac
Use getEmptyArray for stable default value in hook destructuring
MelvinBot May 21, 2026
47a78d7
Merge remote-tracking branch 'origin/main' into claude-stopScrollJump…
MelvinBot May 21, 2026
5be76b1
Add unit tests for selection and non-existing options behavior
MelvinBot May 21, 2026
976f11a
Fix ESLint errors in useSearchSelectorTest
MelvinBot May 21, 2026
9d3f0c8
Simplify sectionIndex to use fixed values
MelvinBot May 21, 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
15 changes: 15 additions & 0 deletions src/hooks/useSearchSelector/base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,9 @@ type UseSearchSelectorConfig = {

/** Whether to keep selected options in availableOptions instead of filtering them out */
shouldKeepSelectedInAvailableOptions?: boolean;

/** Whether to separate selected options that are not in availableOptions.personalDetails (e.g. non-existing users invited by email) */
shouldSeparateNonExistingSelectedOptions?: boolean;
};

type ContactState = {
Expand Down Expand Up @@ -126,6 +129,9 @@ type UseSearchSelectorReturn = {
/** Currently selected options used for list display. This prop can be used in selection list to display selected options that are filtered by search term */
selectedOptionsForDisplay: OptionData[];

/** Selected options that are not present in availableOptions.personalDetails (e.g. non-existing users invited by email). Only populated when shouldSeparateNonExistingSelectedOptions is true */
selectedNonExistingOptions?: OptionData[];

/** Function to set selected options */
setSelectedOptions: (options: OptionData[]) => void;

Expand Down Expand Up @@ -174,6 +180,7 @@ function useSearchSelectorBase({
recentAttendees,
shouldAllowNameOnlyOptions = false,
shouldKeepSelectedInAvailableOptions = false,
shouldSeparateNonExistingSelectedOptions = false,
}: UseSearchSelectorConfig): UseSearchSelectorReturn {
const {options: defaultOptions, areOptionsInitialized} = useOptionsList({
shouldInitialize,
Expand Down Expand Up @@ -422,6 +429,13 @@ function useSearchSelectorBase({
);
});

const selectedNonExistingOptions = shouldSeparateNonExistingSelectedOptions
? (() => {
const personalDetailLogins = new Set(filteredPersonalDetails.map((option) => option.login).filter(Boolean));
return selectedOptionsForDisplay.filter((option) => !personalDetailLogins.has(option.login));
})()
: [];

return {
searchTerm,
debouncedSearchTerm,
Expand All @@ -435,6 +449,7 @@ function useSearchSelectorBase({
contactState: undefined,
onListEndReached,
selectedOptionsForDisplay,
selectedNonExistingOptions,
};
}

Expand Down
21 changes: 13 additions & 8 deletions src/pages/workspace/DynamicWorkspaceInvitePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {DYNAMIC_ROUTES} from '@src/ROUTES';
import type SCREENS from '@src/SCREENS';
import type {InvitedEmailsToAccountIDs} from '@src/types/onyx';
import {isEmptyObject} from '@src/types/utils/EmptyObject';
import getEmptyArray from '@src/types/utils/getEmptyArray';
import AccessOrNotFoundWrapper from './AccessOrNotFoundWrapper';
import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading';
import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading';
Expand Down Expand Up @@ -106,7 +107,7 @@ function DynamicWorkspaceInvitePage({route, policy}: WorkspaceInvitePageProps) {
setSearchTerm,
availableOptions,
selectedOptions,
selectedOptionsForDisplay,
selectedNonExistingOptions = getEmptyArray<OptionData>(),
toggleSelection,
areOptionsInitialized,
onListEndReached,
Expand All @@ -120,6 +121,8 @@ function DynamicWorkspaceInvitePage({route, policy}: WorkspaceInvitePageProps) {
includeRecentReports: false,
shouldInitialize: didScreenTransitionEnd,
initialSelected: initiallySelectedOptions,
shouldKeepSelectedInAvailableOptions: true,
shouldSeparateNonExistingSelectedOptions: true,
});

const sections: Array<Section<OptionData>> = useMemo(() => {
Expand All @@ -129,16 +132,16 @@ function DynamicWorkspaceInvitePage({route, policy}: WorkspaceInvitePageProps) {
return [];
}

// Selected options section
if (selectedOptionsForDisplay.length > 0) {
// Selected non-existing users section (top)
if (selectedNonExistingOptions.length > 0) {
sectionsArr.push({
title: undefined,
data: selectedOptionsForDisplay,
data: selectedNonExistingOptions,
sectionIndex: 0,
});
}

// Contacts section
// Contacts section (includes both selected and unselected items)
if (availableOptions.personalDetails.length > 0) {
sectionsArr.push({
title: translate('common.contacts'),
Expand All @@ -147,8 +150,8 @@ function DynamicWorkspaceInvitePage({route, policy}: WorkspaceInvitePageProps) {
});
}

// User to invite section
if (availableOptions.userToInvite) {
// User to invite section (hide if already selected and shown in the top section)
if (availableOptions.userToInvite && !availableOptions.userToInvite.isSelected) {
sectionsArr.push({
title: undefined,
data: [availableOptions.userToInvite],
Expand All @@ -157,7 +160,7 @@ function DynamicWorkspaceInvitePage({route, policy}: WorkspaceInvitePageProps) {
}

return sectionsArr;
}, [areOptionsInitialized, selectedOptionsForDisplay, availableOptions.personalDetails, availableOptions.userToInvite, translate]);
}, [areOptionsInitialized, selectedNonExistingOptions, availableOptions.personalDetails, availableOptions.userToInvite, translate]);

const handleToggleSelection = useCallback(
(option: OptionData) => {
Expand Down Expand Up @@ -265,6 +268,8 @@ function DynamicWorkspaceInvitePage({route, policy}: WorkspaceInvitePageProps) {
onSelectRow={handleToggleSelection}
shouldShowTextInput
textInputOptions={textInputOptions}
shouldUpdateFocusedIndex
shouldPreventAutoScrollOnSelect
Copy link
Copy Markdown
Contributor

@mkhutornyi mkhutornyi May 21, 2026

Choose a reason for hiding this comment

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

@MelvinBot shouldUpdateFocusedIndex is missing

confirmButtonOptions={{
onConfirm: inviteUser,
isDisabled: !selectedOptions.length,
Expand Down
Loading
Loading