From 53828ce4d0db57cbb56b4df78a601e67d93b763f Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Mon, 4 Sep 2023 14:17:16 +0300
Subject: [PATCH] [ENG-1070] Dialog form button submit disabled if form is not
 valid (#1292)

* Feedback dialog cleanup, disable submit button of dialog if form not valid

* ts

* Update FeedbackDialog.tsx
---
 .../Layout/Sidebar/FeedbackDialog.tsx          | 15 ++++++---------
 .../library/locations/AddLocationDialog.tsx    |  7 +++++--
 .../settings/library/tags/CreateDialog.tsx     |  3 ++-
 packages/ui/src/Dialog.tsx                     |  4 +++-
 packages/ui/src/Input.tsx                      |  2 +-
 packages/ui/src/forms/TextAreaField.tsx        | 18 ++++++++++++++++++
 packages/ui/src/forms/index.ts                 |  1 +
 7 files changed, 36 insertions(+), 14 deletions(-)
 create mode 100644 packages/ui/src/forms/TextAreaField.tsx

diff --git a/interface/app/$libraryId/Layout/Sidebar/FeedbackDialog.tsx b/interface/app/$libraryId/Layout/Sidebar/FeedbackDialog.tsx
index be12166ba..4e567d613 100644
--- a/interface/app/$libraryId/Layout/Sidebar/FeedbackDialog.tsx
+++ b/interface/app/$libraryId/Layout/Sidebar/FeedbackDialog.tsx
@@ -1,10 +1,10 @@
 import clsx from 'clsx';
 import { useState } from 'react';
 import { useZodForm } from '@sd/client';
-import { Dialog, TextArea, UseDialogProps, toast, useDialog, z } from '@sd/ui';
+import { Dialog, TextAreaField, UseDialogProps, toast, useDialog, z } from '@sd/ui';
 
 const schema = z.object({
-	feedback: z.string().min(1),
+	feedback: z.string().min(1, { message: 'Feedback is required' }),
 	emoji: z.string().emoji().max(2).optional()
 });
 
@@ -12,7 +12,7 @@ const EMOJIS = ['🤩', '😀', '🙁', '😭'];
 const FEEDBACK_URL = 'https://spacedrive.com/api/feedback';
 
 export default function FeedbackDialog(props: UseDialogProps) {
-	const form = useZodForm({ schema });
+	const form = useZodForm({ schema, mode: 'onBlur' });
 	const [emojiSelected, setEmojiSelected] = useState<string | undefined>(undefined);
 
 	const emojiSelectHandler = (index: number) => {
@@ -36,8 +36,6 @@ export default function FeedbackDialog(props: UseDialogProps) {
 		}
 	});
 
-	const watchForm = form.watch();
-
 	return (
 		<Dialog
 			invertButtonFocus
@@ -45,11 +43,10 @@ export default function FeedbackDialog(props: UseDialogProps) {
 			dialog={useDialog(props)}
 			form={form}
 			onSubmit={formSubmit}
-			submitDisabled={form.formState.isSubmitting || !watchForm.feedback}
 			ctaLabel="Submit"
 			closeLabel="Cancel"
 			buttonsSideContent={
-				<div className="flex w-full items-center justify-center gap-1">
+				<div className="flex items-center justify-center w-full gap-1">
 					{EMOJIS.map((emoji, i) => (
 						<div
 							onClick={() => emojiSelectHandler(i)}
@@ -65,10 +62,10 @@ export default function FeedbackDialog(props: UseDialogProps) {
 				</div>
 			}
 		>
-			<TextArea
+			<TextAreaField
+				{...form.register('feedback')}
 				placeholder="Your feedback..."
 				className="w-full"
-				{...form.register('feedback')}
 			/>
 		</Dialog>
 	);
diff --git a/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx b/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx
index dc79d6df5..940de2143 100644
--- a/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx
+++ b/interface/app/$libraryId/settings/library/locations/AddLocationDialog.tsx
@@ -75,7 +75,10 @@ export const AddLocationDialog = ({
 		[listIndexerRules.data]
 	);
 
-	const form = useZodForm({ schema, defaultValues: { path, method, indexerRulesIds } });
+	const form = useZodForm({
+		schema,
+		defaultValues: { path, method, indexerRulesIds }
+	});
 
 	useEffect(() => {
 		// Update form values when default value changes and the user hasn't made any changes
@@ -213,7 +216,7 @@ export const AddLocationDialog = ({
 					: ''
 			}
 		>
-			<ErrorMessage name={REMOTE_ERROR_FORM_FIELD} variant="large" className="mb-4 mt-2" />
+			<ErrorMessage name={REMOTE_ERROR_FORM_FIELD} variant="large" className="mt-2 mb-4" />
 
 			<InputField
 				size="md"
diff --git a/interface/app/$libraryId/settings/library/tags/CreateDialog.tsx b/interface/app/$libraryId/settings/library/tags/CreateDialog.tsx
index 99775bc46..7deaad6cb 100644
--- a/interface/app/$libraryId/settings/library/tags/CreateDialog.tsx
+++ b/interface/app/$libraryId/settings/library/tags/CreateDialog.tsx
@@ -12,7 +12,8 @@ export default (props: UseDialogProps & { objects?: Object[] }) => {
 
 	const form = useZodForm({
 		schema: schema,
-		defaultValues: { color: '#A717D9' }
+		defaultValues: { color: '#A717D9' },
+		mode: 'onBlur'
 	});
 
 	const createTag = useLibraryMutation('tags.create');
diff --git a/packages/ui/src/Dialog.tsx b/packages/ui/src/Dialog.tsx
index f2d82209d..33ea5fb20 100644
--- a/packages/ui/src/Dialog.tsx
+++ b/packages/ui/src/Dialog.tsx
@@ -179,7 +179,9 @@ export function Dialog<S extends FieldValues>({
 		<Button
 			type="submit"
 			size="sm"
-			disabled={form.formState.isSubmitting || props.submitDisabled}
+			disabled={
+				form.formState.isSubmitting || props.submitDisabled || !form.formState.isValid
+			}
 			variant={props.ctaDanger ? 'colored' : 'accent'}
 			className={clsx(props.ctaDanger && 'border-red-500 bg-red-500')}
 		>
diff --git a/packages/ui/src/Input.tsx b/packages/ui/src/Input.tsx
index b59e3ada1..e3b2da03f 100644
--- a/packages/ui/src/Input.tsx
+++ b/packages/ui/src/Input.tsx
@@ -1,7 +1,7 @@
 import { VariantProps, cva } from 'class-variance-authority';
 import clsx from 'clsx';
 import { Eye, EyeSlash, Icon, IconProps, MagnifyingGlass } from 'phosphor-react';
-import { PropsWithChildren, createElement, forwardRef, isValidElement, useState } from 'react';
+import { createElement, forwardRef, isValidElement, useState } from 'react';
 import { Button } from './Button';
 
 export interface InputBaseProps extends VariantProps<typeof inputStyles> {
diff --git a/packages/ui/src/forms/TextAreaField.tsx b/packages/ui/src/forms/TextAreaField.tsx
new file mode 100644
index 000000000..220ee2c82
--- /dev/null
+++ b/packages/ui/src/forms/TextAreaField.tsx
@@ -0,0 +1,18 @@
+import { forwardRef } from 'react';
+import * as Root from '../Input';
+import { useFormField } from './FormField';
+import { FormField, UseFormFieldProps } from './FormField';
+
+export interface TextAreaFieldProps extends UseFormFieldProps, Root.TextareaProps {
+	name: string;
+}
+
+export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>((props, ref) => {
+	const { formFieldProps, childProps } = useFormField(props);
+
+	return (
+		<FormField {...formFieldProps}>
+			<Root.TextArea {...childProps} ref={ref} error={formFieldProps.error !== undefined} />
+		</FormField>
+	);
+});
diff --git a/packages/ui/src/forms/index.ts b/packages/ui/src/forms/index.ts
index fffa6fb53..f1b0715b0 100644
--- a/packages/ui/src/forms/index.ts
+++ b/packages/ui/src/forms/index.ts
@@ -4,4 +4,5 @@ export * from './CheckBoxField';
 export * from './InputField';
 export * from './SwitchField';
 export * from './SelectField';
+export * from './TextAreaField';
 export * as RadioGroupField from './RadioGroupField';