test: ✅ Fix MultiSelectCustom tests

RocketChat · Jul 10, 2024 · d315d45 · d315d45
1 parent ecfe590
commit d315d45
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 13 deletions.
diff --git a/apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx b/apps/meteor/client/views/admin/users/UsersTable/UsersTableFilters.tsx
@@ -58,7 +58,7 @@ const UsersTableFilters = ({ roleData, setUsersFilters }: UsersTableFiltersProps
 	);
 
 	const breakpoints = useBreakpoints();
-	const fixFiltersSize = breakpoints.includes('lg') ? { maxWidth: 'x200', minWidth: 'x200' } : null;
+	const fixFiltersSize = breakpoints.includes('lg') ? { maxWidth: 'x224', minWidth: 'x224' } : null;
 
 	return (
 		<FilterByText shouldAutoFocus placeholder={t('Search_Users')} onChange={handleSearchTextChange}>

diff --git a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@rocket.chat/fuselage';
+import { Box, Button } from '@rocket.chat/fuselage';
 import { useOutsideClick, useToggle } from '@rocket.chat/fuselage-hooks';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import type { ComponentProps, FormEvent, ReactElement, RefObject } from 'react';
@@ -93,7 +93,7 @@ export const MultiSelectCustom = ({
 	const count = dropdownOptions.filter((option) => option.checked).length;
 
 	return (
-		<>
+		<Box display='flex' position='relative'>
 			<MultiSelectCustomAnchor
 				ref={reference}
 				collapsed={collapsed}
@@ -106,10 +106,10 @@ export const MultiSelectCustom = ({
 				{...props}
 			/>
 			{collapsed && (
-				<MultiSelectCustomListWrapper ref={reference}>
+				<MultiSelectCustomListWrapper ref={target}>
 					<MultiSelectCustomList options={dropdownOptions} onSelected={onSelect} searchBarText={searchBarText} />
 				</MultiSelectCustomListWrapper>
 			)}
-		</>
+		</Box>
 	);
 };
diff --git a/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx b/packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomAnchor.tsx
@@ -1,5 +1,5 @@
 import { css } from '@rocket.chat/css-in-js';
-import { Box, Icon, Palette } from '@rocket.chat/fuselage';
+import { Box, Icon } from '@rocket.chat/fuselage';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ComponentProps } from 'react';
@@ -27,21 +27,15 @@ const MultiSelectCustomAnchor = forwardRef<HTMLElement, MultiSelectCustomAnchorP
 
 	return (
 		<Box
-			is='button'
 			ref={ref}
 			role='button'
 			tabIndex={0}
 			display='flex'
 			justifyContent='space-between'
 			alignItems='center'
 			h='x40'
-			className={['rcx-input-box__wrapper', customStyle].filter(Boolean)}
-			w='full'
-			pb={10}
-			pi={16}
-			color={isDirty ? Palette.text['font-default'].toString() : Palette.text['font-annotation'].toString()}
-			rcx-input-box
 			{...props}
+			className={['rcx-input-box__wrapper', customStyle].filter(Boolean)}
 		>
 			{isDirty ? `${t(selectedOptionsTitle)} (${selectedOptionsCount})` : t(defaultTitle)}
 			<Icon name={collapsed ? 'chevron-up' : 'chevron-down'} fontSize='x20' color='hint' />