Merge pull request Expensify#89984 from software-mansion-labs/fix/custom-single-select-popup-item-height

Fix SingleSelectPopup height with non-default item heights

Author: mollfpr

src/components/Search/FilterComponents/SingleSelect.tsx

@@ -35,11 +35,25 @@ type SingleSelectProps<T> = {
     /** Whether SelectionList of popup should stay mounted when popup is not visible. */
     shouldShowList?: boolean;
 
+    /** Custom height for each item in the list */
+    itemHeight?: number;
+
     hasTitle?: boolean;
     hasHeader?: boolean;
 };
 
-function SingleSelect<T extends string>({value, items, isSearchable, searchPlaceholder, selectionListStyle, shouldShowList = true, hasTitle, hasHeader, onChange}: SingleSelectProps<T>) {
+function SingleSelect<T extends string>({
+    value,
+    items,
+    isSearchable,
+    searchPlaceholder,
+    selectionListStyle,
+    shouldShowList = true,
+    hasTitle,
+    hasHeader,
+    onChange,
+    itemHeight,
+}: SingleSelectProps<T>) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const [selectedItem, setSelectedItem] = useState(value);
@@ -99,7 +113,7 @@ function SingleSelect<T extends string>({value, items, isSearchable, searchPlace
             hasHeader={hasHeader}
             hasTitle={hasTitle}
             isSearchable={isSearchable}
-            itemHeight={variables.optionRowHeight}
+            itemHeight={itemHeight ?? variables.optionRowHeight}
         >
             <Activity mode={shouldShowList ? 'visible' : 'hidden'}>
                 <SelectionList
@@ -108,7 +122,11 @@ function SingleSelect<T extends string>({value, items, isSearchable, searchPlace
                     ListItem={SingleSelectListItem}
                     onSelectRow={updateSelectedItem}
                     textInputOptions={textInputOptions}
-                    style={{contentContainerStyle: [styles.pb0], ...selectionListStyle}}
+                    style={{
+                        contentContainerStyle: [styles.pb0],
+                        ...selectionListStyle,
+                        listItemWrapperStyle: [itemHeight !== undefined && {minHeight: itemHeight}, selectionListStyle?.listItemWrapperStyle],
+                    }}
                     shouldUpdateFocusedIndex={isSearchable}
                     initiallyFocusedItemKey={isSearchable ? value?.value : undefined}
                     shouldShowLoadingPlaceholder={!noResultsFound}

src/components/Search/FilterDropdowns/SingleSelectPopup.tsx

@@ -39,6 +39,9 @@ type SingleSelectPopupProps<T> = {
     /** Custom styles for the SelectionList */
     selectionListStyle?: SelectionListStyle;
 
+    /** Custom height for each item in the list. Overrides the default row height and adjusts the popover size accordingly. */
+    itemHeight?: number;
+
     /** Whether SelectionList of popup should stay mounted when popup is not visible. */
     shouldShowList?: boolean;
 };
@@ -55,6 +58,7 @@ function SingleSelectPopup<T extends string>({
     defaultValue,
     style,
     selectionListStyle,
+    itemHeight,
     shouldShowList = true,
 }: SingleSelectPopupProps<T>) {
     const [selectedItem, setSelectedItem] = useState(value);
@@ -90,6 +94,7 @@ function SingleSelectPopup<T extends string>({
                     searchPlaceholder={searchPlaceholder}
                     selectionListStyle={selectionListStyle}
                     shouldShowList={shouldShowList}
+                    itemHeight={itemHeight}
                 />
             </ListFilterHeightContextProvider>
         </BasePopup>

src/pages/domain/Members/DomainMembersPage.tsx

@@ -31,6 +31,7 @@ import Navigation from '@navigation/Navigation';
 import type {PlatformStackScreenProps} from '@navigation/PlatformStackNavigation/types';
 import type {DomainSplitNavigatorParamList} from '@navigation/types';
 import BaseDomainMembersPage from '@pages/domain/BaseDomainMembersPage';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -82,7 +83,7 @@ function DomainMembersPage({route}: DomainMembersPageProps) {
             closeOverlay={closeOverlay}
             onChange={handleGroupChange}
             defaultValue={groupOptions.at(0)?.value}
-            selectionListStyle={{listItemWrapperStyle: {minHeight: 40}}}
+            itemHeight={variables.optionRowHeightCompact}
             shouldShowList={isExpanded}
         />
     );

src/pages/workspace/WorkspaceMembersPage.tsx

@@ -657,7 +657,7 @@ function WorkspaceMembersPage({personalDetails, route, policy}: WorkspaceMembers
             closeOverlay={closeOverlay}
             onChange={handleRoleFilterChange}
             defaultValue={roleFilterOptions.at(0)?.value}
-            selectionListStyle={{listItemWrapperStyle: styles.mnh40}}
+            itemHeight={variables.optionRowHeightCompact}
         />
     );