From 2a51f0ee14ec09e1e6323a6baf5cd16175ab5694 Mon Sep 17 00:00:00 2001
From: Robert Azizbekyan <103438454+rAzizbekyan@users.noreply.github.com>
Date: Tue, 31 May 2022 13:32:41 +0400
Subject: [PATCH] fixing form error message issue (#2047)

---
 kafka-ui-react-app/src/components/Topics/New/New.tsx          | 2 +-
 .../Topics/shared/Form/CustomParams/CustomParamField.tsx      | 4 ++--
 kafka-ui-react-app/src/lib/yupExtended.ts                     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/kafka-ui-react-app/src/components/Topics/New/New.tsx b/kafka-ui-react-app/src/components/Topics/New/New.tsx
index 98e9aca0d9..cbb15f0141 100644
--- a/kafka-ui-react-app/src/components/Topics/New/New.tsx
+++ b/kafka-ui-react-app/src/components/Topics/New/New.tsx
@@ -24,7 +24,7 @@ enum Filters {
 
 const New: React.FC = () => {
   const methods = useForm<TopicFormData>({
-    mode: 'all',
+    mode: 'onChange',
     resolver: yupResolver(topicFormValidationSchema),
   });
 
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
index d56bd50d54..72f28c5c46 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamField.tsx
@@ -59,7 +59,7 @@ const CustomParamField: React.FC<Props> = ({
       newExistingFields.push(nameValue);
       setExistingFields(newExistingFields);
       setValue(`customParams.${index}.value`, TOPIC_CUSTOM_PARAMS[nameValue], {
-        shouldValidate: true,
+        shouldValidate: !!TOPIC_CUSTOM_PARAMS[nameValue],
       });
     }
   }, [existingFields, index, nameValue, setExistingFields, setValue]);
@@ -92,7 +92,7 @@ const CustomParamField: React.FC<Props> = ({
         </FormError>
       </div>
       <div>
-        <InputLabel>Value</InputLabel>
+        <InputLabel>Value *</InputLabel>
         <Input
           name={`customParams.${index}.value` as const}
           hookFormOptions={{
diff --git a/kafka-ui-react-app/src/lib/yupExtended.ts b/kafka-ui-react-app/src/lib/yupExtended.ts
index c8af702f0f..f93b15de44 100644
--- a/kafka-ui-react-app/src/lib/yupExtended.ts
+++ b/kafka-ui-react-app/src/lib/yupExtended.ts
@@ -61,7 +61,7 @@ export const topicFormValidationSchema = yup.object().shape({
   maxMessageBytes: yup.number().min(1).required(),
   customParams: yup.array().of(
     yup.object().shape({
-      name: yup.string().required(),
+      name: yup.string().required('Custom parameter is required'),
       value: yup.string().required('Value is required'),
     })
   ),