Regression: Pressing enter on search reloads the page - admin pages

client/admin/customEmoji/CustomEmoji.js

@@ -12,7 +12,7 @@ const FilterByText = ({ setFilter, ...props }) => {
 	useEffect(() => {
 		setFilter({ text });
 	}, [text]);
-	return <Box mb='x16' is='form' display='flex' flexDirection='column' {...props}>
+	return <Box mb='x16' is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} display='flex' flexDirection='column' {...props}>
 		<TextInput flexShrink={0} placeholder={t('Search')} addon={<Icon name='magnifier' size='x20'/>} onChange={handleChange} value={text} />
 	</Box>;
 };

client/admin/customSounds/AdminSounds.js

@@ -13,7 +13,7 @@ const FilterByText = ({ setFilter, ...props }) => {
 	useEffect(() => {
 		setFilter({ text });
 	}, [text]);
-	return <Box mb='x16' is='form' display='flex' flexDirection='column' {...props}>
+	return <Box mb='x16' is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} display='flex' flexDirection='column' {...props}>
 		<TextInput flexShrink={0} placeholder={t('Search')} addon={<Icon name='magnifier' size='x20'/>} onChange={handleChange} value={text} />
 	</Box>;
 };

client/admin/customUserStatus/CustomUserStatus.js

@@ -14,7 +14,7 @@ const FilterByText = ({ setFilter, ...props }) => {
 	useEffect(() => {
 		setFilter({ text });
 	}, [text]);
-	return <Box mb='x16' is='form' display='flex' flexDirection='column' {...props}>
+	return <Box mb='x16' is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} display='flex' flexDirection='column' {...props}>
 		<TextInput flexShrink={0} placeholder={t('Search')} addon={<Icon name='magnifier' size='x20'/>} onChange={handleChange} value={text} />
 	</Box>;
 };

client/admin/integrations/IncomingWebhookForm.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { Field, TextInput, Box, ToggleSwitch, Icon, TextAreaInput, FieldGroup, Margins } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../contexts/TranslationContext';
@@ -51,7 +51,7 @@ export default function IncomingWebhookForm({ formValues, formHandlers, extraDat
 
 	const hilightedExampleJson = hilightCode('json', JSON.stringify(exampleData, null, 2));
 
-	return <Page.ScrollableContent pb='x24' mi='neg-x24' is='form' qa-admin-user-edit='form' { ...props }>
+	return <Page.ScrollableContent pb='x24' mi='neg-x24' is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} qa-admin-user-edit='form' { ...props }>
 		<Margins block='x16'>
 			<FieldGroup width='x600' alignSelf='center'>
 				{useMemo(() => <Field>

client/admin/integrations/IntegrationsTable.js

@@ -21,7 +21,7 @@ const FilterByTypeAndText = React.memo(({ setFilter, ...props }) => {
 		setFilter({ text });
 	}, [text]);
 
-	return <Box mb='x16' is='form' display='flex' flexDirection='column' {...props}>
+	return <Box mb='x16' is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} display='flex' flexDirection='column' {...props}>
 		<TextInput placeholder={t('Search_Integrations')} addon={<Icon name='magnifier' size='x20'/>} onChange={handleChange} value={text} />
 	</Box>;
 });

client/admin/integrations/OutgoiongWebhookForm.js

@@ -10,7 +10,7 @@ import {
 	Select,
 	Accordion,
 } from '@rocket.chat/fuselage';
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 
 import { useHilightCode } from '../../hooks/useHilightCode';
 import { useExampleData } from './exampleIncomingData';
@@ -95,7 +95,7 @@ export default function OutgoingWebhookForm({ formValues, formHandlers, append,
 
 	const hilightedExampleJson = hilightCode('json', JSON.stringify(exampleData, null, 2));
 
-	return <Page.ScrollableContent pb='x24' mi='neg-x24' is='form' qa-admin-user-edit='form' { ...props }>
+	return <Page.ScrollableContent pb='x24' mi='neg-x24' is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} qa-admin-user-edit='form' { ...props }>
 		<Margins block='x16'>
 			<Accordion width='x600' alignSelf='center' >
 				<FieldGroup>

client/admin/mailer/Mailer.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { TextInput, TextAreaInput, Field, FieldGroup, CheckBox, Button, Icon, ButtonGroup } from '@rocket.chat/fuselage';
 
 import { isEmail } from '../../../app/utils/lib/isEmail.js';
@@ -25,7 +25,7 @@ export function Mailer({ sendMail = () => {} }) {
 			</ButtonGroup>
 		</Page.Header>
 		<Page.ScrollableContentWithShadow alignSelf='center' w='100%' display='flex' flexDirection='column' alignItems='center'>
-			<FieldGroup maxWidth='x600' is='form' method='post'>
+			<FieldGroup maxWidth='x600' is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} method='post'>
 				<Field>
 					<Field.Label>{t('From')}</Field.Label>
 					<Field.Row>

client/admin/rooms/EditRoom.js

@@ -81,7 +81,7 @@ function EditRoom({ room, onChange }) {
 	const isFavorite = newData.favorite ?? !!room.favorite;
 	const isFeatured = newData.featured ?? !!room.featured;
 
-	return <VerticalBar.ScrollableContent is='form'>
+	return <VerticalBar.ScrollableContent is='form' onSubmit={useCallback((e) => e.preventDefault(), [])}>
 		{deleted && <Callout type='danger' title={t('Room_has_been_deleted')}></Callout>}
 
 		<Field>

client/admin/rooms/RoomsTable.js

@@ -44,7 +44,7 @@ const FilterByTypeAndText = ({ setFilter, ...props }) => {
 	const idOmnichannel = useUniqueId();
 	const idDiscussions = useUniqueId();
 
-	return <Box mb='x16' is='form' display='flex' flexDirection='column' {...props}>
+	return <Box mb='x16' is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} display='flex' flexDirection='column' {...props}>
 		<TextInput flexShrink={0} placeholder={t('Search_Rooms')} addon={<Icon name='magnifier' size='x20'/>} onChange={handleChange} value={text} />
 		<Field>
 			<Box display='flex' flexDirection='row' flexWrap='wrap' justifyContent='flex-start' mbs='x8' mi='neg-x8'>

client/admin/rooms/edit/EditRoom.js

@@ -81,7 +81,7 @@ function EditRoom({ room, onChange }) {
 	const isFavorite = newData.favorite ?? !!room.favorite;
 	const isFeatured = newData.featured ?? !!room.featured;
 
-	return <Page.ScrollableContent pb='x24' mi='neg-x24' is='form'>
+	return <Page.ScrollableContent pb='x24' mi='neg-x24' is='form' onSubmit={useCallback((e) => e.preventDefault(), [])}>
 		<Margins blockEnd='x16'>
 
 			{deleted && <Callout type='danger' title={t('Room_has_been_deleted')}></Callout>}

client/admin/users/AddUser.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import { Field, TextInput, Box, ToggleSwitch, Icon, TextAreaInput, MultiSelectFiltered, Margins, Button } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../contexts/TranslationContext';
@@ -57,7 +57,7 @@ export function AddUser({ roles, ...props }) {
 
 	const availableRoles = roleData && roleData.roles ? roleData.roles.map(({ _id, description }) => [_id, description || _id]) : [];
 
-	return <VerticalBar.ScrollableContent is='form' { ...props }>
+	return <VerticalBar.ScrollableContent is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} { ...props }>
 		<Field>
 			<Field.Label>{t('Name')}</Field.Label>
 			<Field.Row>

client/admin/users/EditUser.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import { Field, TextInput, Box, Skeleton, ToggleSwitch, Icon, TextAreaInput, MultiSelectFiltered, Margins, Button } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../contexts/TranslationContext';
@@ -112,7 +112,7 @@ export function EditUser({ data, roles, ...props }) {
 	const setRandomPassword = newData.setRandomPassword || false;
 	const requirePasswordChange = setRandomPassword || newData.requirePasswordChange || false;
 
-	return <VerticalBar.ScrollableContent is='form' qa-admin-user-edit='form' { ...props }>
+	return <VerticalBar.ScrollableContent is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} qa-admin-user-edit='form' { ...props }>
 		<UserAvatarEditor username={data.username} setAvatarObj={setAvatarObj}/>
 		<Field>
 			<Field.Label>{t('Name')}</Field.Label>

client/admin/users/UserInfo.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import { Box, Avatar, Margins, Skeleton, Chip, Tag } from '@rocket.chat/fuselage';
 import moment from 'moment';
 
@@ -64,7 +64,7 @@ export function UserInfo({ data, onChange, ...props }) {
 
 	const avatarUrl = roomTypes.getConfig('d').getAvatarPath({ name: data.username || data.name, type: 'd', _id: data._id });
 
-	return <VerticalBar.ScrollableContent is='form' {...props}>
+	return <VerticalBar.ScrollableContent is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} {...props}>
 		<Box display='flex' flexDirection='column' alignItems='center'>
 			<Margins block='x2'>
 				<Avatar size={'x120'} title={data.username} url={avatarUrl}/>

client/admin/users/UsersTable.js

@@ -18,7 +18,7 @@ const FilterByText = ({ setFilter, ...props }) => {
 	useEffect(() => {
 		setFilter({ text });
 	}, [text]);
-	return <Box mb='x16' is='form' display='flex' flexDirection='column' {...props}>
+	return <Box mb='x16' is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} display='flex' flexDirection='column' {...props}>
 		<TextInput flexShrink={0} placeholder={t('Search_Users')} addon={<Icon name='magnifier' size='x20'/>} onChange={handleChange} value={text} />
 	</Box>;
 };