From 82b33e24c2353b823ed69ebff12c162dca501333 Mon Sep 17 00:00:00 2001
From: Daniel Silva <danieldoglas@users.noreply.github.com>
Date: Fri, 5 Apr 2024 14:02:58 +0200
Subject: [PATCH] Revert "Replace OptionsSelector with SelectionList - part 1"

---
 src/components/SelectionList/BaseListItem.tsx |  8 ---
 .../SelectionList/BaseSelectionList.tsx       | 26 +++-------
 src/components/SelectionList/types.ts         | 19 ++-----
 src/components/TagPicker/index.tsx            | 21 +++++---
 src/components/WorkspaceSwitcherButton.tsx    |  3 --
 src/libs/OptionsListUtils.ts                  | 16 +++---
 src/pages/EditReportFieldDropdownPage.tsx     | 29 ++++++-----
 src/pages/WorkspaceSwitcherPage.tsx           | 49 +++++++++++++------
 .../ShareLogList/BaseShareLogList.tsx         | 49 ++++++++++---------
 tests/unit/OptionsListUtilsTest.js            | 15 ------
 10 files changed, 108 insertions(+), 127 deletions(-)

diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx
index 5bf8d2f1612f..cd1a40b5ef5d 100644
--- a/src/components/SelectionList/BaseListItem.tsx
+++ b/src/components/SelectionList/BaseListItem.tsx
@@ -81,14 +81,6 @@ function BaseListItem<TItem extends ListItem>({
                             </View>
                         </View>
                     )}
-                    {!item.isSelected && item.brickRoadIndicator && (
-                        <View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
-                            <Icon
-                                src={Expensicons.DotIndicator}
-                                fill={item.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.INFO ? theme.iconSuccessFill : theme.danger}
-                            />
-                        </View>
-                    )}
                     {rightHandSideComponentRender()}
                 </View>
                 {FooterComponent}
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
index dc69dfd39989..8dd7577de779 100644
--- a/src/components/SelectionList/BaseSelectionList.tsx
+++ b/src/components/SelectionList/BaseSelectionList.tsx
@@ -69,11 +69,8 @@ function BaseSelectionList<TItem extends ListItem>(
         listHeaderWrapperStyle,
         isRowMultilineSupported = false,
         textInputRef,
-        textInputIconLeft,
-        sectionTitleStyles,
         headerMessageStyle,
         shouldHideListOnInitialRender = true,
-        textInputAutoFocus = true,
     }: BaseSelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
@@ -82,7 +79,7 @@ function BaseSelectionList<TItem extends ListItem>(
     const listRef = useRef<RNSectionList<TItem, SectionWithIndexOffset<TItem>>>(null);
     const innerTextInputRef = useRef<RNTextInput | null>(null);
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-    const shouldShowTextInput = !!textInputLabel || !!textInputIconLeft;
+    const shouldShowTextInput = !!textInputLabel;
     const shouldShowSelectAll = !!onSelectAll;
     const activeElementRole = useActiveElementRole();
     const isFocused = useIsFocused();
@@ -313,7 +310,7 @@ function BaseSelectionList<TItem extends ListItem>(
             // We do this so that we can reference the height in `getItemLayout` –
             // we need to know the heights of all list items up-front in order to synchronously compute the layout of any given list item.
             // So be aware that if you adjust the content of the section header (for example, change the font size), you may need to adjust this explicit height as well.
-            <View style={[styles.optionsListSectionHeader, styles.justifyContentCenter, sectionTitleStyles]}>
+            <View style={[styles.optionsListSectionHeader, styles.justifyContentCenter]}>
                 <Text style={[styles.ph4, styles.textLabelSupporting]}>{section.title}</Text>
             </View>
         );
@@ -380,9 +377,6 @@ function BaseSelectionList<TItem extends ListItem>(
     /** Focuses the text input when the component comes into focus and after any navigation animations finish. */
     useFocusEffect(
         useCallback(() => {
-            if (!textInputAutoFocus) {
-                return;
-            }
             if (shouldShowTextInput) {
                 focusTimeoutRef.current = setTimeout(() => {
                     if (!innerTextInputRef.current) {
@@ -397,7 +391,7 @@ function BaseSelectionList<TItem extends ListItem>(
                 }
                 clearTimeout(focusTimeoutRef.current);
             };
-        }, [shouldShowTextInput, textInputAutoFocus]),
+        }, [shouldShowTextInput]),
     );
 
     const prevTextInputValue = usePrevious(textInputValue);
@@ -500,12 +494,8 @@ function BaseSelectionList<TItem extends ListItem>(
                                             return;
                                         }
 
-                                        if (typeof textInputRef === 'function') {
-                                            textInputRef(element as RNTextInput);
-                                        } else {
-                                            // eslint-disable-next-line no-param-reassign
-                                            textInputRef.current = element as RNTextInput;
-                                        }
+                                        // eslint-disable-next-line no-param-reassign
+                                        textInputRef.current = element as RNTextInput;
                                     }}
                                     label={textInputLabel}
                                     accessibilityLabel={textInputLabel}
@@ -518,7 +508,6 @@ function BaseSelectionList<TItem extends ListItem>(
                                     inputMode={inputMode}
                                     selectTextOnFocus
                                     spellCheck={false}
-                                    iconLeft={textInputIconLeft}
                                     onSubmitEditing={selectFocusedOption}
                                     blurOnSubmit={!!flattenedSections.allOptions.length}
                                     isLoading={isLoadingNewOptions}
@@ -526,10 +515,7 @@ function BaseSelectionList<TItem extends ListItem>(
                                 />
                             </View>
                         )}
-
-                        {/* If we are loading new options we will avoid showing any header message. This is mostly because one of the header messages says there are no options. */}
-                        {/* This is misleading because we might be in the process of loading fresh options from the server. */}
-                        {!isLoadingNewOptions && headerMessage && (
+                        {!!headerMessage && (
                             <View style={headerMessageStyle ?? [styles.ph5, styles.pb5]}>
                                 <Text style={[styles.textLabel, styles.colorMuted]}>{headerMessage}</Text>
                             </View>
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index f4b1b990811f..e401dd5456b2 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -1,12 +1,10 @@
 import type {MutableRefObject, ReactElement, ReactNode} from 'react';
 import type {GestureResponderEvent, InputModeOptions, LayoutChangeEvent, SectionListData, StyleProp, TextInput, TextStyle, ViewStyle} from 'react-native';
 import type {MaybePhraseKey} from '@libs/Localize';
-import type {BrickRoad} from '@libs/WorkspacesSettingsUtils';
 import type CONST from '@src/CONST';
 import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
 import type {ReceiptErrors} from '@src/types/onyx/Transaction';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
-import type IconAsset from '@src/types/utils/IconAsset';
 import type InviteMemberListItem from './InviteMemberListItem';
 import type RadioListItem from './RadioListItem';
 import type TableListItem from './TableListItem';
@@ -112,8 +110,6 @@ type ListItem = {
 
     /** The search value from the selection list */
     searchText?: string | null;
-
-    brickRoadIndicator?: BrickRoad | '' | null;
 };
 
 type ListItemProps = CommonListItemProps<ListItem> & {
@@ -218,12 +214,6 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Max length for the text input */
     textInputMaxLength?: number;
 
-    /** Icon to display on the left side of TextInput */
-    textInputIconLeft?: IconAsset;
-
-    /** Whether text input should be focused */
-    textInputAutoFocus?: boolean;
-
     /** Callback to fire when the text input changes */
     onChangeText?: (text: string) => void;
 
@@ -231,7 +221,7 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     inputMode?: InputModeOptions;
 
     /** Item `keyForList` to focus initially */
-    initiallyFocusedOptionKey?: string | null;
+    initiallyFocusedOptionKey?: string;
 
     /** Callback to fire when the list is scrolled */
     onScroll?: () => void;
@@ -282,7 +272,7 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     disableKeyboardShortcuts?: boolean;
 
     /** Styles to apply to SelectionList container */
-    containerStyle?: StyleProp<ViewStyle>;
+    containerStyle?: ViewStyle;
 
     /** Whether keyboard is visible on the screen */
     isKeyboardShown?: boolean;
@@ -306,10 +296,7 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     isRowMultilineSupported?: boolean;
 
     /** Ref for textInput */
-    textInputRef?: MutableRefObject<TextInput | null> | ((ref: TextInput | null) => void);
-
-    /** Styles for the section title */
-    sectionTitleStyles?: StyleProp<ViewStyle>;
+    textInputRef?: MutableRefObject<TextInput | null>;
 
     /**
      * When true, the list won't be visible until the list layout is measured. This prevents the list from "blinking" as it's scrolled to the bottom which is recommended for large lists.
diff --git a/src/components/TagPicker/index.tsx b/src/components/TagPicker/index.tsx
index 8287f9b56be8..54ad016173b7 100644
--- a/src/components/TagPicker/index.tsx
+++ b/src/components/TagPicker/index.tsx
@@ -2,8 +2,7 @@ import React, {useMemo, useState} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import type {EdgeInsets} from 'react-native-safe-area-context';
-import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/RadioListItem';
+import OptionsSelector from '@components/OptionsSelector';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -101,15 +100,21 @@ function TagPicker({selectedTag, tagListName, policyTags, tagListIndex, policyRe
     const selectedOptionKey = sections[0]?.data?.filter((policyTag) => policyTag.searchText === selectedTag)?.[0]?.keyForList;
 
     return (
-        <SelectionList
-            ListItem={RadioListItem}
-            containerStyle={{paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}}
-            sectionTitleStyles={styles.mt5}
+        <OptionsSelector
+            // @ts-expect-error TODO: Remove this once OptionsSelector (https://github.com/Expensify/App/issues/25125) is migrated to TypeScript.
+            contentContainerStyles={[{paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}]}
+            optionHoveredStyle={styles.hoveredComponentBG}
+            sectionHeaderStyle={styles.mt5}
             sections={sections}
-            textInputValue={searchValue}
+            selectedOptions={selectedOptions}
             headerMessage={headerMessage}
-            textInputLabel={shouldShowTextInput ? translate('common.search') : undefined}
+            textInputLabel={translate('common.search')}
+            boldStyle
+            highlightSelectedOptions
             isRowMultilineSupported
+            shouldShowTextInput={shouldShowTextInput}
+            // Focus the first option when searching
+            focusedIndex={0}
             // Focus the selected option on first load
             initiallyFocusedOptionKey={selectedOptionKey}
             onChangeText={setSearchValue}
diff --git a/src/components/WorkspaceSwitcherButton.tsx b/src/components/WorkspaceSwitcherButton.tsx
index e12afaa77dd0..2b9b3480f96d 100644
--- a/src/components/WorkspaceSwitcherButton.tsx
+++ b/src/components/WorkspaceSwitcherButton.tsx
@@ -23,7 +23,6 @@ type WorkspaceSwitcherButtonProps = WorkspaceSwitcherButtonOnyxProps;
 function WorkspaceSwitcherButton({policy}: WorkspaceSwitcherButtonProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
-    const pressableRef = useRef<View>();
 
     const pressableRef = useRef<HTMLDivElement | View | null>(null);
 
@@ -45,13 +44,11 @@ function WorkspaceSwitcherButton({policy}: WorkspaceSwitcherButtonProps) {
             <PressableWithFeedback
                 ref={pressableRef}
                 accessibilityRole={CONST.ROLE.BUTTON}
-                ref={pressableRef}
                 accessibilityLabel={translate('common.workspaces')}
                 accessible
                 onPress={() => {
                     pressableRef?.current?.blur();
                     interceptAnonymousUser(() => {
-                        pressableRef.current?.blur();
                         Navigation.navigate(ROUTES.WORKSPACE_SWITCHER);
                     });
                 }}
diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts
index 063bfa5f1bc8..3acbd9232c87 100644
--- a/src/libs/OptionsListUtils.ts
+++ b/src/libs/OptionsListUtils.ts
@@ -1105,18 +1105,16 @@ function getCategoryListSections(
  *
  * @param tags - an initial tag array
  */
-function getTagsOptions(tags: Array<Pick<PolicyTag, 'name' | 'enabled'>>, selectedOptions?: SelectedTagOption[]): Option[] {
+function getTagsOptions(tags: Array<Pick<PolicyTag, 'name' | 'enabled'>>): Option[] {
     return tags.map((tag) => {
         // This is to remove unnecessary escaping backslash in tag name sent from backend.
         const cleanedName = PolicyUtils.getCleanedTagName(tag.name);
-
         return {
             text: cleanedName,
             keyForList: tag.name,
             searchText: tag.name,
             tooltipText: cleanedName,
             isDisabled: !tag.enabled,
-            isSelected: selectedOptions?.some((selectedTag) => selectedTag.name === tag.name),
         };
     });
 }
@@ -1148,7 +1146,7 @@ function getTagListSections(
             // "Selected" section
             title: '',
             shouldShow: false,
-            data: getTagsOptions(selectedTagOptions, selectedOptions),
+            data: getTagsOptions(selectedTagOptions),
         });
 
         return tagSections;
@@ -1161,7 +1159,7 @@ function getTagListSections(
             // "Search" section
             title: '',
             shouldShow: true,
-            data: getTagsOptions(searchTags, selectedOptions),
+            data: getTagsOptions(searchTags),
         });
 
         return tagSections;
@@ -1172,7 +1170,7 @@ function getTagListSections(
             // "All" section when items amount less than the threshold
             title: '',
             shouldShow: false,
-            data: getTagsOptions(enabledTags, selectedOptions),
+            data: getTagsOptions(enabledTags),
         });
 
         return tagSections;
@@ -1197,7 +1195,7 @@ function getTagListSections(
             // "Selected" section
             title: '',
             shouldShow: true,
-            data: getTagsOptions(selectedTagOptions, selectedOptions),
+            data: getTagsOptions(selectedTagOptions),
         });
     }
 
@@ -1208,7 +1206,7 @@ function getTagListSections(
             // "Recent" section
             title: Localize.translateLocal('common.recent'),
             shouldShow: true,
-            data: getTagsOptions(cutRecentlyUsedTags, selectedOptions),
+            data: getTagsOptions(cutRecentlyUsedTags),
         });
     }
 
@@ -1216,7 +1214,7 @@ function getTagListSections(
         // "All" section when items amount more than the threshold
         title: Localize.translateLocal('common.all'),
         shouldShow: true,
-        data: getTagsOptions(filteredTags, selectedOptions),
+        data: getTagsOptions(filteredTags),
     });
 
     return tagSections;
diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx
index 75c2a9c5be26..e887860ae155 100644
--- a/src/pages/EditReportFieldDropdownPage.tsx
+++ b/src/pages/EditReportFieldDropdownPage.tsx
@@ -2,9 +2,8 @@ import React, {useMemo, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import OptionsSelector from '@components/OptionsSelector';
 import ScreenWrapper from '@components/ScreenWrapper';
-import SelectionList from '@components/SelectionList';
-import RadioListItem from '@components/SelectionList/RadioListItem';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -43,7 +42,6 @@ type ReportFieldDropdownData = {
     keyForList: string;
     searchText: string;
     tooltipText: string;
-    isSelected?: boolean;
 };
 
 type ReportFieldDropdownSectionItem = {
@@ -73,7 +71,6 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldKey, fieldValue,
                     keyForList: option,
                     searchText: option,
                     tooltipText: option,
-                    isSelected: option === fieldValue,
                 })),
             });
         } else {
@@ -87,7 +84,6 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldKey, fieldValue,
                             keyForList: selectedValue,
                             searchText: selectedValue,
                             tooltipText: selectedValue,
-                            isSelected: true,
                         },
                     ],
                 });
@@ -134,18 +130,27 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldKey, fieldValue,
             {({insets}) => (
                 <>
                     <HeaderWithBackButton title={fieldName} />
-                    <SelectionList
-                        ListItem={RadioListItem}
-                        containerStyle={{paddingBottom: getSafeAreaMargins(insets).marginBottom}}
+                    <OptionsSelector
+                        // @ts-expect-error TODO: TS migration
+                        contentContainerStyles={[{paddingBottom: getSafeAreaMargins(insets).marginBottom}]}
+                        optionHoveredStyle={styles.hoveredComponentBG}
+                        sectionHeaderStyle={styles.mt5}
+                        selectedOptions={[{name: fieldValue}]}
                         textInputLabel={translate('common.search')}
+                        boldStyle
                         sections={sections}
-                        sectionTitleStyles={styles.mt5}
-                        textInputValue={searchValue}
-                        onSelectRow={(option) => onSubmit({[fieldKey]: fieldValue === option.text ? '' : option.text})}
+                        // Focus the first option when searching
+                        focusedIndex={0}
+                        value={searchValue}
+                        onSelectRow={(option: Record<string, string>) =>
+                            onSubmit({
+                                [fieldKey]: fieldValue === option.text ? '' : option.text,
+                            })
+                        }
                         onChangeText={setSearchValue}
+                        highlightSelectedOptions
                         isRowMultilineSupported
                         headerMessage={headerMessage}
-                        initiallyFocusedOptionKey={fieldValue}
                     />
                 </>
             )}
diff --git a/src/pages/WorkspaceSwitcherPage.tsx b/src/pages/WorkspaceSwitcherPage.tsx
index 406447d04c05..6f077f764474 100644
--- a/src/pages/WorkspaceSwitcherPage.tsx
+++ b/src/pages/WorkspaceSwitcherPage.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxCollection} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
@@ -7,10 +7,9 @@ import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {MagnifyingGlass} from '@components/Icon/Expensicons';
 import OptionRow from '@components/OptionRow';
+import OptionsSelector from '@components/OptionsSelector';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import ScreenWrapper from '@components/ScreenWrapper';
-import SelectionList from '@components/SelectionList';
-import UserListItem from '@components/SelectionList/UserListItem';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
@@ -58,6 +57,7 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
+    const [selectedOption, setSelectedOption] = useState<SimpleWorkspaceItem>();
     const [searchTerm, setSearchTerm] = useState('');
     const {inputCallbackRef} = useAutoFocusInput();
     const {translate} = useLocalize();
@@ -105,6 +105,11 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) {
 
             const {policyID} = option;
 
+            if (policyID) {
+                setSelectedOption(option);
+            } else {
+                setSelectedOption(undefined);
+            }
             setActiveWorkspaceID(policyID);
             Navigation.goBack();
             if (policyID !== activeWorkspaceID) {
@@ -124,7 +129,6 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) {
             .map((policy) => ({
                 text: policy?.name,
                 policyID: policy?.id,
-                isSelected: policy?.id === activeWorkspaceID,
                 brickRoadIndicator: getIndicatorTypeForPolicy(policy?.id),
                 icons: [
                     {
@@ -138,7 +142,7 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) {
                 keyForList: policy?.id,
                 isPolicyAdmin: PolicyUtils.isPolicyAdmin(policy),
             }));
-    }, [policies, getIndicatorTypeForPolicy, hasUnreadData, isOffline, activeWorkspaceID]);
+    }, [policies, getIndicatorTypeForPolicy, hasUnreadData, isOffline]);
 
     const filteredAndSortedUserWorkspaces = useMemo(
         () =>
@@ -232,20 +236,28 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) {
                 </View>
 
                 {usersWorkspaces.length > 0 ? (
-                    <SelectionList
-                        ListItem={UserListItem}
-                        textInputPlaceholder={translate('workspace.switcher.placeholder')}
-                        textInputRef={inputCallbackRef}
+                    <OptionsSelector
+                        // @ts-expect-error TODO: remove this comment once OptionsSelector (https://github.com/Expensify/App/issues/25125) is migrated to TS
+                        placeholder={translate('workspace.switcher.placeholder')}
+                        ref={inputCallbackRef}
                         sections={[usersWorkspacesSectionData]}
-                        textInputValue={searchTerm}
+                        value={searchTerm}
+                        shouldShowTextInput={usersWorkspaces.length >= CONST.WORKSPACE_SWITCHER.MINIMUM_WORKSPACES_TO_SHOW_SEARCH}
                         onChangeText={setSearchTerm}
+                        selectedOptions={selectedOption ? [selectedOption] : []}
                         onSelectRow={selectPolicy}
                         shouldPreventDefaultFocusOnSelectRow
                         headerMessage={headerMessage}
-                        containerStyle={[styles.pt0, styles.mt0]}
-                        textInputIconLeft={usersWorkspaces.length >= CONST.WORKSPACE_SWITCHER.MINIMUM_WORKSPACES_TO_SHOW_SEARCH ? MagnifyingGlass : undefined}
-                        initiallyFocusedOptionKey={activeWorkspaceID}
-                        textInputAutoFocus={false}
+                        highlightSelectedOptions
+                        shouldShowOptions
+                        autoFocus={false}
+                        canSelectMultipleOptions={false}
+                        shouldShowSubscript={false}
+                        showTitleTooltip={false}
+                        contentContainerStyles={[styles.pt0, styles.mt0]}
+                        textIconLeft={MagnifyingGlass}
+                        // Null is to avoid selecting unfocused option when Global selected, undefined is to focus selected workspace
+                        initiallyFocusedOptionKey={!activeWorkspaceID ? null : undefined}
                     />
                 ) : (
                     <WorkspaceCardCreateAWorkspace />
@@ -257,6 +269,7 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) {
             setSearchTerm,
             searchTerm,
             selectPolicy,
+            selectedOption,
             styles,
             theme.textSupporting,
             translate,
@@ -268,6 +281,14 @@ function WorkspaceSwitcherPage({policies}: WorkspaceSwitcherPageProps) {
         ],
     );
 
+    useEffect(() => {
+        if (!activeWorkspaceID) {
+            return;
+        }
+        const optionToSet = usersWorkspaces.find((option) => option.policyID === activeWorkspaceID);
+        setSelectedOption(optionToSet);
+    }, [activeWorkspaceID, usersWorkspaces]);
+
     return (
         <ScreenWrapper testID={WorkspaceSwitcherPage.displayName}>
             <HeaderWithBackButton
diff --git a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx
index 4019f3410962..cee62380a011 100644
--- a/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx
+++ b/src/pages/settings/AboutPage/ShareLogList/BaseShareLogList.tsx
@@ -3,10 +3,8 @@ import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import {useOptionsList} from '@components/OptionListContextProvider';
+import OptionsSelector from '@components/OptionsSelector';
 import ScreenWrapper from '@components/ScreenWrapper';
-import SelectionList from '@components/SelectionList';
-import type {ListItem} from '@components/SelectionList/types';
-import UserListItem from '@components/SelectionList/UserListItem';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -15,6 +13,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {Report} from '@src/types/onyx';
 import type {BaseShareLogListOnyxProps, BaseShareLogListProps} from './types';
 
 function BaseShareLogList({betas, onAttachLogToReport}: BaseShareLogListProps) {
@@ -97,7 +96,7 @@ function BaseShareLogList({betas, onAttachLogToReport}: BaseShareLogListProps) {
         setSearchValue(value);
     };
 
-    const attachLogToReport = (option: ListItem) => {
+    const attachLogToReport = (option: Report) => {
         if (!option.reportID) {
             return;
         }
@@ -111,24 +110,30 @@ function BaseShareLogList({betas, onAttachLogToReport}: BaseShareLogListProps) {
             testID={BaseShareLogList.displayName}
             includeSafeAreaPaddingBottom={false}
         >
-            <HeaderWithBackButton
-                title={translate('initialSettingsPage.debugConsole.shareLog')}
-                onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_CONSOLE)}
-            />
-            <View style={[styles.flex1, styles.w100, styles.pRelative]}>
-                <SelectionList
-                    ListItem={UserListItem}
-                    sections={sections}
-                    onSelectRow={attachLogToReport}
-                    onChangeText={onChangeText}
-                    textInputValue={searchValue}
-                    headerMessage={headerMessage}
-                    shouldShowTooltips={areOptionsInitialized}
-                    isLoadingNewOptions={!areOptionsInitialized}
-                    textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
-                    textInputHint={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''}
-                />
-            </View>
+            {({safeAreaPaddingBottomStyle}) => (
+                <>
+                    <HeaderWithBackButton
+                        title={translate('initialSettingsPage.debugConsole.shareLog')}
+                        onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_CONSOLE)}
+                    />
+                    <View style={[styles.flex1, styles.w100, styles.pRelative]}>
+                        <OptionsSelector
+                            // @ts-expect-error TODO: remove this comment once OptionsSelector (https://github.com/Expensify/App/issues/25125) is migrated to TS
+                            sections={sections}
+                            onSelectRow={attachLogToReport}
+                            onChangeText={onChangeText}
+                            value={searchValue}
+                            headerMessage={headerMessage}
+                            showTitleTooltip
+                            shouldShowOptions={areOptionsInitialized}
+                            textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                            textInputAlert={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''}
+                            safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
+                            autoFocus
+                        />
+                    </View>
+                </>
+            )}
         </ScreenWrapper>
     );
 }
diff --git a/tests/unit/OptionsListUtilsTest.js b/tests/unit/OptionsListUtilsTest.js
index 981f5285c88d..d590236e5256 100644
--- a/tests/unit/OptionsListUtilsTest.js
+++ b/tests/unit/OptionsListUtilsTest.js
@@ -1130,7 +1130,6 @@ describe('OptionsListUtils', () => {
                         searchText: 'Accounting',
                         tooltipText: 'Accounting',
                         isDisabled: false,
-                        isSelected: false,
                     },
                     {
                         text: 'HR',
@@ -1138,7 +1137,6 @@ describe('OptionsListUtils', () => {
                         searchText: 'HR',
                         tooltipText: 'HR',
                         isDisabled: false,
-                        isSelected: false,
                     },
                     {
                         text: 'Medical',
@@ -1146,7 +1144,6 @@ describe('OptionsListUtils', () => {
                         searchText: 'Medical',
                         tooltipText: 'Medical',
                         isDisabled: false,
-                        isSelected: false,
                     },
                 ],
             },
@@ -1162,7 +1159,6 @@ describe('OptionsListUtils', () => {
                         searchText: 'Accounting',
                         tooltipText: 'Accounting',
                         isDisabled: false,
-                        isSelected: false,
                     },
                 ],
             },
@@ -1231,7 +1227,6 @@ describe('OptionsListUtils', () => {
                         searchText: 'Medical',
                         tooltipText: 'Medical',
                         isDisabled: false,
-                        isSelected: true,
                     },
                 ],
             },
@@ -1245,7 +1240,6 @@ describe('OptionsListUtils', () => {
                         searchText: 'HR',
                         tooltipText: 'HR',
                         isDisabled: false,
-                        isSelected: false,
                     },
                 ],
             },
@@ -1260,7 +1254,6 @@ describe('OptionsListUtils', () => {
                         searchText: 'Accounting',
                         tooltipText: 'Accounting',
                         isDisabled: false,
-                        isSelected: false,
                     },
                     {
                         text: 'Benefits',
@@ -1268,7 +1261,6 @@ describe('OptionsListUtils', () => {
                         searchText: 'Benefits',
                         tooltipText: 'Benefits',
                         isDisabled: false,
-                        isSelected: false,
                     },
                     {
                         text: 'Cleaning',
@@ -1276,7 +1268,6 @@ describe('OptionsListUtils', () => {
                         searchText: 'Cleaning',
                         tooltipText: 'Cleaning',
                         isDisabled: false,
-                        isSelected: false,
                     },
                     {
                         text: 'Food',
@@ -1284,7 +1275,6 @@ describe('OptionsListUtils', () => {
                         searchText: 'Food',
                         tooltipText: 'Food',
                         isDisabled: false,
-                        isSelected: false,
                     },
                     {
                         text: 'HR',
@@ -1292,7 +1282,6 @@ describe('OptionsListUtils', () => {
                         searchText: 'HR',
                         tooltipText: 'HR',
                         isDisabled: false,
-                        isSelected: false,
                     },
                     {
                         text: 'Software',
@@ -1300,7 +1289,6 @@ describe('OptionsListUtils', () => {
                         searchText: 'Software',
                         tooltipText: 'Software',
                         isDisabled: false,
-                        isSelected: false,
                     },
                     {
                         text: 'Taxes',
@@ -1308,7 +1296,6 @@ describe('OptionsListUtils', () => {
                         searchText: 'Taxes',
                         tooltipText: 'Taxes',
                         isDisabled: false,
-                        isSelected: false,
                     },
                 ],
             },
@@ -1324,7 +1311,6 @@ describe('OptionsListUtils', () => {
                         searchText: 'Accounting',
                         tooltipText: 'Accounting',
                         isDisabled: false,
-                        isSelected: false,
                     },
                     {
                         text: 'Cleaning',
@@ -1332,7 +1318,6 @@ describe('OptionsListUtils', () => {
                         searchText: 'Cleaning',
                         tooltipText: 'Cleaning',
                         isDisabled: false,
-                        isSelected: false,
                     },
                 ],
             },
