[FIX] User auto complete breaks on enter key press (#27213)

RocketChat · Nov 16, 2022 · ed63a76 · ed63a76
1 parent b3220b6
commit ed63a76
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 28 deletions.
diff --git a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleFederated.tsx b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleFederated.tsx
@@ -1,9 +1,8 @@
 import { MultiSelectFiltered, Icon, Box, Chip } from '@rocket.chat/fuselage';
-import type { Options } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
-import React, { memo, ReactElement, useState, ComponentProps } from 'react';
+import React, { memo, ReactElement, useState, useCallback, useMemo } from 'react';
 
 import UserAvatar from '../avatar/UserAvatar';
 import AutocompleteOptions, { OptionsContext } from './UserAutoCompleteMultipleOptions';
@@ -55,33 +54,58 @@ const UserAutoCompleteMultipleFederated = ({
 		{ keepPreviousData: true },
 	);
 
-	const options = data || [];
+	const options = useMemo(() => data || [], [data]);
 
-	const onAddSelected: ComponentProps<typeof Options>['onSelect'] = ([value]) => {
-		setFilter('');
-		const cachedOption = options.find(([curVal]) => curVal === value)?.[1];
-		if (!cachedOption) {
-			throw new Error('UserAutoCompleteMultiple - onAddSelected - failed to cache option');
-		}
-		setSelectedCache({ ...selectedCache, [value]: cachedOption });
-	};
+	const onAddUser = useCallback(
+		(username: string): void => {
+			const user = options.find(([val]) => val === username)?.[1];
+			if (!user) {
+				throw new Error('UserAutoCompleteMultiple - onAddSelected - failed to cache option');
+			}
+			setSelectedCache((selectedCache) => ({ ...selectedCache, [username]: user }));
+		},
+		[setSelectedCache, options],
+	);
+
+	const onRemoveUser = useCallback(
+		(username: string): void =>
+			setSelectedCache((selectedCache) => {
+				const users = { ...selectedCache };
+				delete users[username];
+				return users;
+			}),
+		[setSelectedCache],
+	);
+
+	const handleOnChange = useCallback(
+		(usernames: string[]) => {
+			onChange(usernames);
+			const newAddedUsername = usernames.filter((username) => !value.includes(username))[0];
+			const removedUsername = value.filter((username) => !usernames.includes(username))[0];
+			setFilter('');
+			newAddedUsername && onAddUser(newAddedUsername);
+			removedUsername && onRemoveUser(removedUsername);
+		},
+		[onChange, setFilter, onAddUser, onRemoveUser, value],
+	);
 
 	return (
-		<OptionsContext.Provider value={{ options, onSelect: onAddSelected }}>
+		<OptionsContext.Provider value={{ options }}>
 			<MultiSelectFiltered
+				data-qa-type='user-auto-complete-input'
 				placeholder={placeholder}
 				value={value}
-				onChange={onChange}
+				onChange={handleOnChange}
 				filter={filter}
 				setFilter={setFilter}
 				renderSelected={({ value, onMouseDown }: { value: string; onMouseDown: () => void }): ReactElement => {
-					const currentCachedOption = selectedCache[value];
+					const currentCachedOption = selectedCache[value] || {};
 
 					return (
 						<Chip key={value} {...props} height='x20' onMouseDown={onMouseDown} mie='x4' mb='x2'>
 							{currentCachedOption._federated ? <Icon size='x20' name='globe' /> : <UserAvatar size='x20' username={value} />}
 							<Box is='span' margin='none' mis='x4'>
-								{currentCachedOption.name || currentCachedOption.username}
+								{currentCachedOption.name || currentCachedOption.username || value}
 							</Box>
 						</Chip>
 					);

diff --git a/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOptions.tsx b/apps/meteor/client/components/UserAutoCompleteMultiple/UserAutoCompleteMultipleOptions.tsx
@@ -12,27 +12,22 @@ type Options = Array<[UserAutoCompleteOptionType['username'], UserAutoCompleteOp
 
 type OptionsContextValue = {
 	options: ComponentProps<typeof Options>['options'];
-	onSelect: ComponentProps<typeof Options>['onSelect'];
 };
 
 export const OptionsContext = createContext<OptionsContextValue>({
 	options: [],
-	onSelect: () => undefined,
 });
 const UserAutoCompleteMultipleOptions = forwardRef(function UserAutoCompleteMultipleOptions(
-	{ onSelect: _onSelect, ...props }: ComponentProps<typeof Options>,
+	{ onSelect, ...props }: ComponentProps<typeof Options>,
 	ref: Ref<HTMLElement>,
 ): ReactElement {
-	const { options, onSelect } = useContext(OptionsContext);
+	const { options } = useContext(OptionsContext);
 	return (
 		<Options
 			{...props}
 			key='AutocompleteOptions'
 			options={options}
-			onSelect={(val): void => {
-				onSelect(val);
-				_onSelect(val);
-			}}
+			onSelect={onSelect}
 			ref={ref}
 			renderItem={UserAutoCompleteMultipleOption}
 		/>

diff --git a/apps/meteor/client/sidebar/header/CreateDirectMessage.tsx b/apps/meteor/client/sidebar/header/CreateDirectMessage.tsx
@@ -34,7 +34,7 @@ const CreateDirectMessage: FC<CreateDirectMessageProps> = ({ onClose }) => {
 	});
 
 	return (
-		<Modal>
+		<Modal data-qa='create-direct-modal'>
 			<Modal.Header>
 				<Modal.Title>{t('Direct_Messages')}</Modal.Title>
 				<Modal.Close onClick={onClose} />

diff --git a/apps/meteor/tests/e2e/create-channel.spec.ts b/apps/meteor/tests/e2e/create-channel.spec.ts
@@ -20,7 +20,7 @@ test.describe.serial('channel-management', () => {
 		await poHomeChannel.sidenav.openNewByLabel('Channel');
 		await poHomeChannel.sidenav.checkboxPrivateChannel.click();
 		await poHomeChannel.sidenav.inputChannelName.type(channelName);
-		await poHomeChannel.sidenav.btnCreateChannel.click();
+		await poHomeChannel.sidenav.btnCreate.click();
 
 		await expect(page).toHaveURL(`/channel/${channelName}`);
 	});
@@ -30,7 +30,7 @@ test.describe.serial('channel-management', () => {
 
 		await poHomeChannel.sidenav.openNewByLabel('Channel');
 		await poHomeChannel.sidenav.inputChannelName.type(channelName);
-		await poHomeChannel.sidenav.btnCreateChannel.click();
+		await poHomeChannel.sidenav.btnCreate.click();
 
 		await expect(page).toHaveURL(`/group/${channelName}`);
 	});

diff --git a/apps/meteor/tests/e2e/create-direct.spec.ts b/apps/meteor/tests/e2e/create-direct.spec.ts
@@ -0,0 +1,26 @@
+import { test, expect } from './utils/test';
+import { HomeChannel } from './page-objects';
+
+test.use({ storageState: 'admin-session.json' });
+
+test.describe.serial('channel-direct-message', () => {
+	let poHomeChannel: HomeChannel;
+
+	test.beforeEach(async ({ page }) => {
+		poHomeChannel = new HomeChannel(page);
+
+		await page.goto('/home');
+	});
+
+	test('expect create a direct room', async ({ page }) => {
+		await poHomeChannel.sidenav.openNewByLabel('Direct Messages');
+
+		await poHomeChannel.sidenav.inputDirectUsername.click();
+		await page.keyboard.type('rocket.cat');
+		await page.waitForTimeout(200);
+		await page.keyboard.press('Enter');
+		await poHomeChannel.sidenav.btnCreate.click();
+
+		await expect(page).toHaveURL('direct/rocket.catrocketchat.internal.admin.test');
+	});
+});
diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-sidenav.ts
@@ -17,7 +17,11 @@ export class HomeSidenav {
 		return this.page.locator('#modal-root [data-qa="create-channel-modal"] [data-qa-type="channel-name-input"]');
 	}
 
-	get btnCreateChannel(): Locator {
+	get inputDirectUsername(): Locator {
+		return this.page.locator('#modal-root [data-qa="create-direct-modal"] [data-qa-type="user-auto-complete-input"]');
+	}
+
+	get btnCreate(): Locator {
 		return this.page.locator('//*[@id="modal-root"]//button[contains(text(), "Create")]');
 	}
 
@@ -56,6 +60,6 @@ export class HomeSidenav {
 		await this.openNewByLabel('Channel');
 		await this.checkboxPrivateChannel.click();
 		await this.inputChannelName.type(name);
-		await this.btnCreateChannel.click();
+		await this.btnCreate.click();
 	}
 }