update height calculation for signle/multi select popup to match user select popup

Author: s77rt

src/components/Search/FilterDropdowns/MultiSelectPopup.tsx

@@ -78,7 +78,7 @@ function MultiSelectPopup<T extends string>({label, value, items, closeOverlay,
         <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
             {isSmallScreenWidth && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
 
-            <View style={[styles.getSelectionListPopoverHeight(items.length, windowHeight)]}>
+            <View style={[styles.getSelectionListPopoverHeight(items.length, windowHeight, false)]}>
                 <SelectionList
                     shouldSingleExecuteRowSelect
                     sections={[{data: listData}]}

src/components/Search/FilterDropdowns/SingleSelectPopup.tsx

@@ -95,6 +95,8 @@ function SingleSelectPopup<T extends string>({label, value, items, closeOverlay,
         };
     }, [isSearchable, items, value, selectedItem, debouncedSearchTerm]);
 
+    const dataLength = useMemo(() => sections.flatMap((section) => section.data).length, [sections]);
+
     const updateSelectedItem = useCallback(
         (item: ListItem) => {
             const newItem = items.find((i) => i.value === item.keyForList) ?? null;
@@ -117,7 +119,7 @@ function SingleSelectPopup<T extends string>({label, value, items, closeOverlay,
         <View style={[!isSmallScreenWidth && styles.pv4, styles.gap2]}>
             {isSmallScreenWidth && <Text style={[styles.textLabel, styles.textSupporting, styles.ph5, styles.pv1]}>{label}</Text>}
 
-            <View style={[styles.getSelectionListPopoverHeight(items.length, windowHeight)]}>
+            <View style={[styles.getSelectionListPopoverHeight(dataLength || 1, windowHeight, isSearchable ?? false)]}>
                 <SelectionList
                     shouldSingleExecuteRowSelect
                     sections={sections}

src/styles/index.ts

@@ -5636,12 +5636,22 @@ const styles = (theme: ThemeColors) =>
             marginBottom: 20,
         }),
 
-        getSelectionListPopoverHeight: (itemCount: number, windowHeight: number) => ({
+        getSelectionListPopoverHeight: (itemCount: number, windowHeight: number, isSearchable: boolean) => {
+            const SEARCHBAR_HEIGHT = isSearchable ? 52 : 0;
+            const SEARCHBAR_PADDING = isSearchable ? 12 : 0;
+            const PADDING = 32;
+            const GAP = 8;
+            const BUTTON_HEIGHT = 40;
+            const ESTIMATED_LIST_HEIGHT = itemCount * variables.optionRowHeightCompact + SEARCHBAR_HEIGHT + SEARCHBAR_PADDING;
+            const MAX_HEIGHT = CONST.POPOVER_DROPDOWN_MAX_HEIGHT - (PADDING + GAP + BUTTON_HEIGHT);
+
             // Native platforms don't support maxHeight in the way thats expected, so lets manually set the height to either
             // the listHeight, the max height of the popover, or 90% of the window height, such that we never overflow the screen
             // and never expand over the max height
-            height: Math.min(itemCount * variables.optionRowHeightCompact, CONST.POPOVER_DROPDOWN_MAX_HEIGHT, windowHeight * 0.9),
-        }),
+            const height = Math.min(ESTIMATED_LIST_HEIGHT, MAX_HEIGHT, windowHeight * 0.9);
+
+            return {height};
+        },
 
         getUserSelectionListPopoverHeight: (itemCount: number, windowHeight: number, shouldUseNarrowLayout: boolean) => {
             const BUTTON_HEIGHT = 40;