From 31f8395ffc0d9e6e437112ee87a29f1f72a107b2 Mon Sep 17 00:00:00 2001
From: Gabriel Henriques <gabriel.henriques@rocket.chat>
Date: Fri, 15 May 2020 16:41:40 -0300
Subject: [PATCH 1/2] Removed unwanted page refresh

---
 client/admin/customEmoji/CustomEmoji.js           | 2 +-
 client/admin/customSounds/AdminSounds.js          | 2 +-
 client/admin/customUserStatus/CustomUserStatus.js | 2 +-
 client/admin/integrations/IncomingWebhookForm.js  | 2 +-
 client/admin/integrations/IntegrationsTable.js    | 2 +-
 client/admin/integrations/OutgoiongWebhookForm.js | 2 +-
 client/admin/mailer/Mailer.js                     | 2 +-
 client/admin/rooms/EditRoom.js                    | 2 +-
 client/admin/rooms/RoomsTable.js                  | 2 +-
 client/admin/rooms/edit/EditRoom.js               | 2 +-
 client/admin/users/AddUser.js                     | 2 +-
 client/admin/users/EditUser.js                    | 2 +-
 client/admin/users/UserInfo.js                    | 2 +-
 client/admin/users/UsersTable.js                  | 2 +-
 14 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/client/admin/customEmoji/CustomEmoji.js b/client/admin/customEmoji/CustomEmoji.js
index a12987a5bfdc..2a7d110c4339 100644
--- a/client/admin/customEmoji/CustomEmoji.js
+++ b/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={(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>;
 };
diff --git a/client/admin/customSounds/AdminSounds.js b/client/admin/customSounds/AdminSounds.js
index f6e45a716715..191a288c7471 100644
--- a/client/admin/customSounds/AdminSounds.js
+++ b/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={(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>;
 };
diff --git a/client/admin/customUserStatus/CustomUserStatus.js b/client/admin/customUserStatus/CustomUserStatus.js
index 0052bdfa7c62..98fa2e0d7eb8 100644
--- a/client/admin/customUserStatus/CustomUserStatus.js
+++ b/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={(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>;
 };
diff --git a/client/admin/integrations/IncomingWebhookForm.js b/client/admin/integrations/IncomingWebhookForm.js
index f25ba8b304f0..17f9eb17e90b 100644
--- a/client/admin/integrations/IncomingWebhookForm.js
+++ b/client/admin/integrations/IncomingWebhookForm.js
@@ -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={(e) => e.preventDefault()} qa-admin-user-edit='form' { ...props }>
 		<Margins block='x16'>
 			<FieldGroup width='x600' alignSelf='center'>
 				{useMemo(() => <Field>
diff --git a/client/admin/integrations/IntegrationsTable.js b/client/admin/integrations/IntegrationsTable.js
index 582485154019..ad58edb1c4a7 100644
--- a/client/admin/integrations/IntegrationsTable.js
+++ b/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={(e) => e.preventDefault()} display='flex' flexDirection='column' {...props}>
 		<TextInput placeholder={t('Search_Integrations')} addon={<Icon name='magnifier' size='x20'/>} onChange={handleChange} value={text} />
 	</Box>;
 });
diff --git a/client/admin/integrations/OutgoiongWebhookForm.js b/client/admin/integrations/OutgoiongWebhookForm.js
index 2f6fe9fa4900..923524e92f1d 100644
--- a/client/admin/integrations/OutgoiongWebhookForm.js
+++ b/client/admin/integrations/OutgoiongWebhookForm.js
@@ -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={(e) => e.preventDefault()} qa-admin-user-edit='form' { ...props }>
 		<Margins block='x16'>
 			<Accordion width='x600' alignSelf='center' >
 				<FieldGroup>
diff --git a/client/admin/mailer/Mailer.js b/client/admin/mailer/Mailer.js
index b96718bad53a..172c3c63d506 100644
--- a/client/admin/mailer/Mailer.js
+++ b/client/admin/mailer/Mailer.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={(e) => e.preventDefault()} method='post'>
 				<Field>
 					<Field.Label>{t('From')}</Field.Label>
 					<Field.Row>
diff --git a/client/admin/rooms/EditRoom.js b/client/admin/rooms/EditRoom.js
index f77b06334afb..9ca8fefd6576 100644
--- a/client/admin/rooms/EditRoom.js
+++ b/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={(e) => e.preventDefault()}>
 		{deleted && <Callout type='danger' title={t('Room_has_been_deleted')}></Callout>}
 
 		<Field>
diff --git a/client/admin/rooms/RoomsTable.js b/client/admin/rooms/RoomsTable.js
index e85b975c58d8..3af9c6122891 100644
--- a/client/admin/rooms/RoomsTable.js
+++ b/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={(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'>
diff --git a/client/admin/rooms/edit/EditRoom.js b/client/admin/rooms/edit/EditRoom.js
index 7638bebcc00c..4b797086fc57 100644
--- a/client/admin/rooms/edit/EditRoom.js
+++ b/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={(e) => e.preventDefault()}>
 		<Margins blockEnd='x16'>
 
 			{deleted && <Callout type='danger' title={t('Room_has_been_deleted')}></Callout>}
diff --git a/client/admin/users/AddUser.js b/client/admin/users/AddUser.js
index a84f36824521..a3a516bbd2d8 100644
--- a/client/admin/users/AddUser.js
+++ b/client/admin/users/AddUser.js
@@ -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={(e) => e.preventDefault()} { ...props }>
 		<Field>
 			<Field.Label>{t('Name')}</Field.Label>
 			<Field.Row>
diff --git a/client/admin/users/EditUser.js b/client/admin/users/EditUser.js
index 1feb1eb82c34..d06998aa14f1 100644
--- a/client/admin/users/EditUser.js
+++ b/client/admin/users/EditUser.js
@@ -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={(e) => e.preventDefault()} qa-admin-user-edit='form' { ...props }>
 		<UserAvatarEditor username={data.username} setAvatarObj={setAvatarObj}/>
 		<Field>
 			<Field.Label>{t('Name')}</Field.Label>
diff --git a/client/admin/users/UserInfo.js b/client/admin/users/UserInfo.js
index 93447ce3b669..7cf382c112c5 100644
--- a/client/admin/users/UserInfo.js
+++ b/client/admin/users/UserInfo.js
@@ -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={(e) => e.preventDefault()} {...props}>
 		<Box display='flex' flexDirection='column' alignItems='center'>
 			<Margins block='x2'>
 				<Avatar size={'x120'} title={data.username} url={avatarUrl}/>
diff --git a/client/admin/users/UsersTable.js b/client/admin/users/UsersTable.js
index d664b3b96c32..61cc758ef6f6 100644
--- a/client/admin/users/UsersTable.js
+++ b/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={(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>;
 };

From 1f5cf11c32e6be1a7275f56e018bfba2b06f009f Mon Sep 17 00:00:00 2001
From: Gabriel Henriques <gabriel.henriques@rocket.chat>
Date: Fri, 15 May 2020 16:56:14 -0300
Subject: [PATCH 2/2] Added useCalback

---
 client/admin/customEmoji/CustomEmoji.js           | 2 +-
 client/admin/customSounds/AdminSounds.js          | 2 +-
 client/admin/customUserStatus/CustomUserStatus.js | 2 +-
 client/admin/integrations/IncomingWebhookForm.js  | 4 ++--
 client/admin/integrations/IntegrationsTable.js    | 2 +-
 client/admin/integrations/OutgoiongWebhookForm.js | 4 ++--
 client/admin/mailer/Mailer.js                     | 4 ++--
 client/admin/rooms/EditRoom.js                    | 2 +-
 client/admin/rooms/RoomsTable.js                  | 2 +-
 client/admin/rooms/edit/EditRoom.js               | 2 +-
 client/admin/users/AddUser.js                     | 4 ++--
 client/admin/users/EditUser.js                    | 4 ++--
 client/admin/users/UserInfo.js                    | 4 ++--
 client/admin/users/UsersTable.js                  | 2 +-
 14 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/client/admin/customEmoji/CustomEmoji.js b/client/admin/customEmoji/CustomEmoji.js
index 2a7d110c4339..1837621237c8 100644
--- a/client/admin/customEmoji/CustomEmoji.js
+++ b/client/admin/customEmoji/CustomEmoji.js
@@ -12,7 +12,7 @@ const FilterByText = ({ setFilter, ...props }) => {
 	useEffect(() => {
 		setFilter({ text });
 	}, [text]);
-	return <Box mb='x16' is='form' onSubmit={(e) => e.preventDefault()} 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>;
 };
diff --git a/client/admin/customSounds/AdminSounds.js b/client/admin/customSounds/AdminSounds.js
index 191a288c7471..5800ecf719ce 100644
--- a/client/admin/customSounds/AdminSounds.js
+++ b/client/admin/customSounds/AdminSounds.js
@@ -13,7 +13,7 @@ const FilterByText = ({ setFilter, ...props }) => {
 	useEffect(() => {
 		setFilter({ text });
 	}, [text]);
-	return <Box mb='x16' is='form' onSubmit={(e) => e.preventDefault()} 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>;
 };
diff --git a/client/admin/customUserStatus/CustomUserStatus.js b/client/admin/customUserStatus/CustomUserStatus.js
index 98fa2e0d7eb8..6b62d22ccbec 100644
--- a/client/admin/customUserStatus/CustomUserStatus.js
+++ b/client/admin/customUserStatus/CustomUserStatus.js
@@ -14,7 +14,7 @@ const FilterByText = ({ setFilter, ...props }) => {
 	useEffect(() => {
 		setFilter({ text });
 	}, [text]);
-	return <Box mb='x16' is='form' onSubmit={(e) => e.preventDefault()} 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>;
 };
diff --git a/client/admin/integrations/IncomingWebhookForm.js b/client/admin/integrations/IncomingWebhookForm.js
index 17f9eb17e90b..4bf2e20a1f9d 100644
--- a/client/admin/integrations/IncomingWebhookForm.js
+++ b/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' onSubmit={(e) => e.preventDefault()} 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>
diff --git a/client/admin/integrations/IntegrationsTable.js b/client/admin/integrations/IntegrationsTable.js
index ad58edb1c4a7..e36ba8c3f864 100644
--- a/client/admin/integrations/IntegrationsTable.js
+++ b/client/admin/integrations/IntegrationsTable.js
@@ -21,7 +21,7 @@ const FilterByTypeAndText = React.memo(({ setFilter, ...props }) => {
 		setFilter({ text });
 	}, [text]);
 
-	return <Box mb='x16' is='form' onSubmit={(e) => e.preventDefault()} 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>;
 });
diff --git a/client/admin/integrations/OutgoiongWebhookForm.js b/client/admin/integrations/OutgoiongWebhookForm.js
index 923524e92f1d..7435dbb6fbc4 100644
--- a/client/admin/integrations/OutgoiongWebhookForm.js
+++ b/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' onSubmit={(e) => e.preventDefault()} 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>
diff --git a/client/admin/mailer/Mailer.js b/client/admin/mailer/Mailer.js
index 172c3c63d506..fb423b97b4ce 100644
--- a/client/admin/mailer/Mailer.js
+++ b/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' onSubmit={(e) => e.preventDefault()} method='post'>
+			<FieldGroup maxWidth='x600' is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} method='post'>
 				<Field>
 					<Field.Label>{t('From')}</Field.Label>
 					<Field.Row>
diff --git a/client/admin/rooms/EditRoom.js b/client/admin/rooms/EditRoom.js
index 9ca8fefd6576..6d46ae424fef 100644
--- a/client/admin/rooms/EditRoom.js
+++ b/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' onSubmit={(e) => e.preventDefault()}>
+	return <VerticalBar.ScrollableContent is='form' onSubmit={useCallback((e) => e.preventDefault(), [])}>
 		{deleted && <Callout type='danger' title={t('Room_has_been_deleted')}></Callout>}
 
 		<Field>
diff --git a/client/admin/rooms/RoomsTable.js b/client/admin/rooms/RoomsTable.js
index 3af9c6122891..57fbb87a3b08 100644
--- a/client/admin/rooms/RoomsTable.js
+++ b/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' onSubmit={(e) => e.preventDefault()} 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'>
diff --git a/client/admin/rooms/edit/EditRoom.js b/client/admin/rooms/edit/EditRoom.js
index 4b797086fc57..3ba4b679a911 100644
--- a/client/admin/rooms/edit/EditRoom.js
+++ b/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' onSubmit={(e) => e.preventDefault()}>
+	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>}
diff --git a/client/admin/users/AddUser.js b/client/admin/users/AddUser.js
index a3a516bbd2d8..3b1076655daf 100644
--- a/client/admin/users/AddUser.js
+++ b/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' onSubmit={(e) => e.preventDefault()} { ...props }>
+	return <VerticalBar.ScrollableContent is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} { ...props }>
 		<Field>
 			<Field.Label>{t('Name')}</Field.Label>
 			<Field.Row>
diff --git a/client/admin/users/EditUser.js b/client/admin/users/EditUser.js
index d06998aa14f1..055b61576116 100644
--- a/client/admin/users/EditUser.js
+++ b/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' onSubmit={(e) => e.preventDefault()} 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>
diff --git a/client/admin/users/UserInfo.js b/client/admin/users/UserInfo.js
index 7cf382c112c5..bc1dd867be2c 100644
--- a/client/admin/users/UserInfo.js
+++ b/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' onSubmit={(e) => e.preventDefault()} {...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}/>
diff --git a/client/admin/users/UsersTable.js b/client/admin/users/UsersTable.js
index 61cc758ef6f6..72bb1972fec8 100644
--- a/client/admin/users/UsersTable.js
+++ b/client/admin/users/UsersTable.js
@@ -18,7 +18,7 @@ const FilterByText = ({ setFilter, ...props }) => {
 	useEffect(() => {
 		setFilter({ text });
 	}, [text]);
-	return <Box mb='x16' is='form' onSubmit={(e) => e.preventDefault()} 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>;
 };