fix(ux): standardize form validation (#39590)

Author: juliajforesti

apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx

@@ -60,7 +60,6 @@ const CreateDiscussion = ({
 		watch,
 		setValue,
 	} = useForm({
-		mode: 'onBlur',
 		defaultValues: {
 			name: nameSuggestion || '',
 			parentRoom: '',

apps/meteor/client/hooks/useFormSubmitWithDirtyCheck.ts

@@ -0,0 +1,39 @@
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type UseFormSubmitOptions = {
+	isDirty: boolean;
+	noChangesMessage?: string;
+};
+
+/**
+ * A reusable hook for form submission that implements accessible form validation patterns.
+ *
+ * This hook wraps your form submission handler and:
+ * - Allows submission attempts in both create and edit modes (keeping buttons enabled for a11y)
+ * - Provides user-friendly feedback when trying to save an unchanged edit form
+ */
+
+export const useFormSubmitWithDirtyCheck = <TData>(
+	onSubmit: (data: TData) => Promise<void> | void,
+	{ isDirty, noChangesMessage = 'No_changes_to_save' }: UseFormSubmitOptions,
+) => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	return useCallback(
+		async (data: TData): Promise<void> => {
+			if (!!data && !isDirty) {
+				dispatchToastMessage({
+					type: 'info',
+					message: t(noChangesMessage),
+				});
+				return;
+			}
+
+			await onSubmit(data);
+		},
+		[isDirty, onSubmit, dispatchToastMessage, t, noChangesMessage],
+	);
+};

apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateChannelModal.tsx

@@ -111,7 +111,6 @@ const CreateChannelModal = ({ teamId = '', mainRoom, onClose, reload }: CreateCh
 		setValue,
 		watch,
 	} = useForm({
-		mode: 'onBlur',
 		defaultValues: {
 			members: [],
 			name: '',

apps/meteor/client/navbar/NavBarPagesGroup/actions/CreateDirectMessage.tsx

@@ -38,7 +38,7 @@ const CreateDirectMessage = ({ onClose }: CreateDirectMessageProps) => {
 		control,
 		handleSubmit,
 		formState: { isSubmitting, isValidating, errors },
-	} = useForm({ mode: 'onBlur', defaultValues: { users: [] } });
+	} = useForm({ defaultValues: { users: [] } });
 
 	const goToRoom = useGoToRoom();
 

apps/meteor/client/views/account/profile/AccountProfilePage.tsx

@@ -39,7 +39,7 @@ const AccountProfilePage = (): ReactElement => {
 
 	const methods = useForm({
 		defaultValues: getProfileInitialValues(user),
-		mode: 'onBlur',
+		reValidateMode: 'onBlur',
 	});
 
 	const {

apps/meteor/client/views/admin/users/AdminUserForm.tsx

@@ -120,7 +120,6 @@ const AdminUserForm = ({ userData, onReload, context, refetchUserFormData, roleD
 			isNewUserPage,
 			isVerificationNeeded: !!isVerificationNeeded,
 		}),
-		mode: 'onBlur',
 	});
 
 	const showVoipExtension = useShowVoipExtension();

apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/MessageForm/MessageForm.tsx

@@ -50,7 +50,6 @@ const MessageForm = (props: MessageFormProps) => {
 		setValue,
 	} = useForm<MessageFormData>({
 		mode: 'onChange',
-		reValidateMode: 'onChange',
 		defaultValues: {
 			templateParameters: defaultValues?.templateParameters ?? {},
 			templateId: defaultValues?.templateId ?? '',

apps/meteor/client/views/omnichannel/components/outboundMessage/components/OutboundMessageWizard/forms/RecipientForm/RecipientForm.tsx

@@ -46,7 +46,6 @@ const RecipientForm = (props: RecipientFormProps) => {
 
 	const { trigger, control, handleSubmit, formState, clearErrors, setValue } = useForm<RecipientFormData>({
 		mode: 'onChange',
-		reValidateMode: 'onChange',
 		defaultValues: {
 			contactId: defaultValues?.contactId ?? '',
 			providerId: defaultValues?.providerId ?? '',

apps/meteor/client/views/omnichannel/contactInfo/EditContactInfo.tsx

@@ -23,6 +23,7 @@ import AdvancedContactModal from './AdvancedContactModal';
 import { useCreateContact } from './hooks/useCreateContact';
 import { useEditContact } from './hooks/useEditContact';
 import { hasAtLeastOnePermission } from '../../../../app/authorization/client';
+import { useFormSubmitWithDirtyCheck } from '../../../hooks/useFormSubmitWithDirtyCheck';
 import { useHasLicenseModule } from '../../../hooks/useHasLicenseModule';
 import { omnichannelQueryKeys } from '../../../lib/queryKeys';
 import { ContactManagerInput } from '../additionalForms';
@@ -89,12 +90,11 @@ const EditContactInfo = ({ contactData, onClose, onCancel }: ContactNewEditProps
 	const initialValue = getInitialValues(contactData);
 
 	const {
-		formState: { errors, isSubmitting },
+		formState: { errors, isSubmitting, isDirty },
 		control,
 		watch,
 		handleSubmit,
 	} = useForm<ContactFormData>({
-		mode: 'onBlur',
 		reValidateMode: 'onBlur',
 		defaultValues: initialValue,
 	});
@@ -165,26 +165,31 @@ const EditContactInfo = ({ contactData, onClose, onCancel }: ContactNewEditProps
 
 	const validateName = (v: string): string | boolean => (!v.trim() ? t('Required_field', { field: t('Name') }) : true);
 
-	const handleSave = async (data: ContactFormData): Promise<void> => {
-		const { name, phones, emails, customFields, contactManager } = data;
-
-		const payload = {
-			name,
-			phones: phones.map(({ phoneNumber }) => phoneNumber),
-			emails: emails.map(({ address }) => address),
-			customFields,
-			contactManager,
-		};
-
-		if (contactData) {
-			await editContact.mutateAsync({ contactId: contactData?._id, ...payload });
+	const handleSave = useFormSubmitWithDirtyCheck(
+		async (data: ContactFormData): Promise<void> => {
+			const { name, phones, emails, customFields, contactManager } = data;
+
+			const payload = {
+				name,
+				phones: phones.map(({ phoneNumber }) => phoneNumber),
+				emails: emails.map(({ address }) => address),
+				customFields,
+				contactManager,
+			};
+
+			if (contactData) {
+				await editContact.mutateAsync({ contactId: contactData?._id, ...payload });
+				await queryClient.invalidateQueries({ queryKey: omnichannelQueryKeys.contacts() });
+				return;
+			}
+
+			await createContact.mutateAsync(payload);
 			await queryClient.invalidateQueries({ queryKey: omnichannelQueryKeys.contacts() });
-			return;
-		}
-
-		await createContact.mutateAsync(payload);
-		await queryClient.invalidateQueries({ queryKey: omnichannelQueryKeys.contacts() });
-	};
+		},
+		{
+			isDirty,
+		},
+	);
 
 	const formId = useId();
 	const nameField = useId();

apps/meteor/client/views/omnichannel/customFields/EditCustomFields.tsx

@@ -13,7 +13,6 @@ import {
 	ToggleSwitch,
 	Box,
 } from '@rocket.chat/fuselage';
-import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import {
 	ContextualbarTitle,
 	ContextualbarHeader,
@@ -28,6 +27,7 @@ import { FormProvider, useForm, Controller } from 'react-hook-form';
 
 import { CustomFieldsAdditionalForm } from '../additionalForms';
 import { useRemoveCustomField } from './useRemoveCustomField';
+import { useFormSubmitWithDirtyCheck } from '../../../hooks/useFormSubmitWithDirtyCheck';
 import { omnichannelQueryKeys } from '../../../lib/queryKeys';
 
 export type EditCustomFieldsFormData = {
@@ -66,7 +66,9 @@ const EditCustomFields = ({ customFieldData, onClose }: { customFieldData?: Seri
 
 	const handleDelete = useRemoveCustomField();
 
-	const methods = useForm<EditCustomFieldsFormData>({ mode: 'onBlur', values: getInitialValues(customFieldData) });
+	const methods = useForm<EditCustomFieldsFormData>({
+		values: getInitialValues(customFieldData),
+	});
 	const {
 		control,
 		handleSubmit,
@@ -75,25 +77,28 @@ const EditCustomFields = ({ customFieldData, onClose }: { customFieldData?: Seri
 
 	const saveCustomField = useEndpoint('POST', '/v1/livechat/custom-fields.save');
 
-	const handleSave = useEffectEvent(async ({ visibility, ...data }: EditCustomFieldsFormData) => {
-		try {
-			await saveCustomField({
-				customFieldId: customFieldData?._id as unknown as string,
-				customFieldData: {
-					visibility: visibility ? 'visible' : 'hidden',
-					...data,
-				},
-			});
+	const handleSave = useFormSubmitWithDirtyCheck(
+		async ({ visibility, ...data }: EditCustomFieldsFormData) => {
+			try {
+				await saveCustomField({
+					customFieldId: customFieldData?._id as unknown as string,
+					customFieldData: {
+						visibility: visibility ? 'visible' : 'hidden',
+						...data,
+					},
+				});
 
-			dispatchToastMessage({ type: 'success', message: t('Saved') });
-			queryClient.invalidateQueries({
-				queryKey: omnichannelQueryKeys.livechat.customFields(),
-			});
-			onClose();
-		} catch (error) {
-			dispatchToastMessage({ type: 'error', message: error });
-		}
-	});
+				dispatchToastMessage({ type: 'success', message: t('Saved') });
+				queryClient.invalidateQueries({
+					queryKey: omnichannelQueryKeys.livechat.customFields(),
+				});
+				onClose();
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+		},
+		{ isDirty },
+	);
 
 	const scopeOptions: SelectOption[] = useMemo(
 		() => [
@@ -221,7 +226,7 @@ const EditCustomFields = ({ customFieldData, onClose }: { customFieldData?: Seri
 			<ContextualbarFooter>
 				<ButtonGroup stretch>
 					<Button onClick={onClose}>{t('Cancel')}</Button>
-					<Button form={formId} primary type='submit' disabled={!isDirty}>
+					<Button form={formId} primary type='submit'>
 						{t('Save')}
 					</Button>
 				</ButtonGroup>