fix: Composer Popup doesn't scroll results (#35468)

Co-authored-by: dougfabris <devfabris@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 3 people

.changeset/calm-jobs-relax.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes an issue where the composer popup doesn't scroll the results properly

apps/meteor/client/views/room/composer/ComposerBoxPopup.tsx

@@ -5,6 +5,8 @@ import type { ReactElement } from 'react';
 import { useEffect, memo, useMemo, useRef, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { CustomScrollbars } from '../../../components/CustomScrollbars';
+
 export type ComposerBoxPopupProps<
 	T extends {
 		_id: string;
@@ -91,26 +93,28 @@ function ComposerBoxPopup<
 						{title}
 					</Box>
 				)}
-				<Box pb={8} maxHeight='x320'>
-					{!isLoading && itemsFlat.length === 0 && <Option>{t('No_results_found')}</Option>}
-					{isLoading && <OptionSkeleton />}
-					{itemsFlat.map((item, index) => {
-						return (
-							<Option
-								title={getOptionTitle(item)}
-								onClick={() => select(item)}
-								selected={item === focused}
-								key={index}
-								id={`popup-item-${item._id}`}
-								tabIndex={item === focused ? 0 : -1}
-								aria-selected={item === focused}
-								disabled={item.disabled}
-							>
-								{renderItem({ item: { ...item, variant } })}
-							</Option>
-						);
-					})}
-				</Box>
+				<CustomScrollbars>
+					<Box pb={8} maxHeight='x320'>
+						{!isLoading && itemsFlat.length === 0 && <Option>{t('No_results_found')}</Option>}
+						{isLoading && <OptionSkeleton />}
+						{itemsFlat.map((item, index) => {
+							return (
+								<Option
+									title={getOptionTitle(item)}
+									onClick={() => select(item)}
+									selected={item === focused}
+									key={index}
+									id={`popup-item-${item._id}`}
+									tabIndex={item === focused ? 0 : -1}
+									aria-selected={item === focused}
+									disabled={item.disabled}
+								>
+									{renderItem({ item: { ...item, variant } })}
+								</Option>
+							);
+						})}
+					</Box>
+				</CustomScrollbars>
 			</Tile>
 		</Box>
 	);