Skip to content
Merged
5 changes: 5 additions & 0 deletions .changeset/calm-jobs-relax.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@rocket.chat/meteor': patch
---

Fixes an issue where the composer popup doesn't scroll the results properly
44 changes: 24 additions & 20 deletions apps/meteor/client/views/room/composer/ComposerBoxPopup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
);
Expand Down
Loading