regression: multiselect (#30472)

Co-authored-by: Henrique Guimarães Ribeiro <43561537+rique223@users.noreply.github.com>

apps/meteor/client/views/admin/rooms/RoomsTableFilters.tsx

@@ -2,7 +2,7 @@ import { Box, Icon, TextInput } from '@rocket.chat/fuselage';
 import type { OptionProp } from '@rocket.chat/ui-client';
 import { MultiSelectCustom } from '@rocket.chat/ui-client';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import type { Dispatch, ReactElement, SetStateAction } from 'react';
 
 const roomTypeFilterStructure = [
@@ -46,14 +46,25 @@ const roomTypeFilterStructure = [
 const RoomsTableFilters = ({ setFilters }: { setFilters: Dispatch<SetStateAction<any>> }): ReactElement => {
 	const t = useTranslation();
 	const [text, setText] = useState('');
-	const [roomTypeOptions, setRoomTypeOptions] = useState<OptionProp[]>(roomTypeFilterStructure);
+
 	const [roomTypeSelectedOptions, setRoomTypeSelectedOptions] = useState<OptionProp[]>([]);
 
-	useEffect(() => {
-		return setFilters({ searchText: text, types: roomTypeSelectedOptions });
-	}, [setFilters, roomTypeSelectedOptions, text]);
+	const handleSearchTextChange = useCallback(
+		(event) => {
+			const text = event.currentTarget.value;
+			setFilters({ searchText: text, types: roomTypeSelectedOptions });
+			setText(text);
+		},
+		[roomTypeSelectedOptions, setFilters],
+	);
 
-	const handleSearchTextChange = useCallback((event) => setText(event.currentTarget.value), []);
+	const handleRoomTypeChange = useCallback(
+		(options: OptionProp[]) => {
+			setFilters({ searchText: text, types: options });
+			setRoomTypeSelectedOptions(options);
+		},
+		[text, setFilters],
+	) as Dispatch<SetStateAction<OptionProp[]>>;
 
 	return (
 		<Box
@@ -77,12 +88,11 @@ const RoomsTableFilters = ({ setFilters }: { setFilters: Dispatch<SetStateAction
 			</Box>
 			<Box minWidth='x224' m='x4'>
 				<MultiSelectCustom
-					dropdownOptions={roomTypeOptions}
+					dropdownOptions={roomTypeFilterStructure}
 					defaultTitle={'All_rooms' as any}
 					selectedOptionsTitle='Rooms'
-					setSelectedOptions={setRoomTypeSelectedOptions}
+					setSelectedOptions={handleRoomTypeChange}
 					selectedOptions={roomTypeSelectedOptions}
-					customSetSelected={setRoomTypeOptions}
 				/>
 			</Box>
 		</Box>

packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustom.tsx

@@ -57,7 +57,6 @@ type DropDownProps = {
 	selectedOptionsTitle: TranslationKey;
 	selectedOptions: OptionProp[];
 	setSelectedOptions: Dispatch<SetStateAction<OptionProp[]>>;
-	customSetSelected: Dispatch<SetStateAction<OptionProp[]>>;
 	searchBarText?: TranslationKey;
 };
 
@@ -67,7 +66,6 @@ export const MultiSelectCustom = ({
 	selectedOptionsTitle,
 	selectedOptions,
 	setSelectedOptions,
-	customSetSelected,
 	searchBarText,
 }: DropDownProps): ReactElement => {
 	const reference = useRef<HTMLInputElement>(null);
@@ -90,26 +88,15 @@ export const MultiSelectCustom = ({
 
 	const onSelect = (item: OptionProp, e?: FormEvent<HTMLElement>): void => {
 		e?.stopPropagation();
-
 		item.checked = !item.checked;
 
 		if (item.checked === true) {
-			// the user has enabled this option -> add it to the selected options
 			setSelectedOptions([...new Set([...selectedOptions, item])]);
-			customSetSelected((prevItems) => {
-				const newItems = prevItems;
-				const toggledItem = newItems.find(({ id }) => id === item.id);
-
-				if (toggledItem) {
-					toggledItem.checked = !toggledItem.checked;
-				}
-
-				return [...prevItems];
-			});
-		} else {
-			// the user has disabled this option -> remove this from the selected options list
-			setSelectedOptions(selectedOptions.filter((option: OptionProp) => option.id !== item.id));
+			return;
 		}
+
+		// the user has disabled this option -> remove this from the selected options list
+		setSelectedOptions(selectedOptions.filter((option: OptionProp) => option.id !== item.id));
 	};
 
 	const count = dropdownOptions.filter((option) => option.checked).length;

packages/ui-client/src/components/MultiSelectCustom/MultiSelectCustomList.tsx

@@ -2,7 +2,7 @@ import { Box, CheckBox, Icon, Option, SearchInput, Tile } from '@rocket.chat/fus
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { FormEvent } from 'react';
-import { Fragment, useCallback, useEffect, useState } from 'react';
+import { Fragment, useCallback, useState } from 'react';
 
 import type { OptionProp } from './MultiSelectCustom';
 import { useFilteredOptions } from './useFilteredOptions';
@@ -19,13 +19,10 @@ const MultiSelectCustomList = ({
 	const t = useTranslation();
 
 	const [text, setText] = useState('');
-	const handleChange = useCallback((event) => setText(event.currentTarget.value), []);
-
-	const [optionSearch, setOptionSearch] = useState('');
 
-	useEffect(() => setOptionSearch(text), [setOptionSearch, text]);
+	const handleChange = useCallback((event) => setText(event.currentTarget.value), []);
 
-	const filteredOptions = useFilteredOptions(optionSearch, options);
+	const filteredOptions = useFilteredOptions(text, options);
 
 	return (
 		<Tile overflow='auto' pb='x12' pi={0} elevation='2' w='full' bg='light' borderRadius='x2'>
@@ -48,11 +45,11 @@ const MultiSelectCustomList = ({
 							{t(option.text as TranslationKey)}
 						</Box>
 					) : (
-						<Option key={option.id} onClick={(): void => onSelected(option)}>
-							<Box pis='x4' pb='x4' w='full' display='flex' justifyContent='space-between'>
+						<Option key={option.id}>
+							<Box pis='x4' pb='x4' w='full' display='flex' justifyContent='space-between' is='label'>
 								{t(option.text as TranslationKey)}
 
-								<CheckBox checked={option.checked} onChange={(e): void => onSelected(option, e)} pi={0} name={option.text} />
+								<CheckBox checked={option.checked} pi={0} name={option.text} id={option.id} onChange={() => onSelected(option)} />
 							</Box>
 						</Option>
 					)}