From 77706ce670e9fc88aa13d320bfa7980315ef0761 Mon Sep 17 00:00:00 2001
From: Denys Malofeiev <77440017+Dekshut@users.noreply.github.com>
Date: Mon, 21 Feb 2022 17:02:50 +0200
Subject: [PATCH] [Fixed issue/1302] Edited the behavior of form submitting
 when you send default values of fields (#1586)

* edited the behavior of form submitting

* removed useMemo hook in SendMessage

Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com>
---
 .../Topics/Topic/SendMessage/SendMessage.tsx  | 39 +++++++++++++------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx b/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx
index ee1ba03de4..d6f987d9ff 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx
@@ -1,6 +1,6 @@
 import Editor from 'components/common/Editor/Editor';
 import PageLoader from 'components/common/PageLoader/PageLoader';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { useHistory, useParams } from 'react-router';
 import { clusterTopicMessagesPath } from 'lib/paths';
@@ -28,12 +28,6 @@ interface RouterParams {
 const SendMessage: React.FC = () => {
   const dispatch = useAppDispatch();
   const { clusterName, topicName } = useParams<RouterParams>();
-  const {
-    register,
-    handleSubmit,
-    formState: { isSubmitting, isDirty },
-    control,
-  } = useForm({ mode: 'onChange' });
   const history = useHistory();
 
   jsf.option('fillProperties', false);
@@ -73,6 +67,29 @@ const SendMessage: React.FC = () => {
     );
   }, [messageSchema, schemaIsFetched]);
 
+  const {
+    register,
+    handleSubmit,
+    formState: { isSubmitting, isDirty },
+    control,
+    reset,
+  } = useForm({
+    mode: 'onChange',
+    defaultValues: {
+      key: keyDefaultValue,
+      content: contentDefaultValue,
+      headers: undefined,
+      partition: undefined,
+    },
+  });
+
+  useEffect(() => {
+    reset({
+      key: keyDefaultValue,
+      content: contentDefaultValue,
+    });
+  }, [keyDefaultValue, contentDefaultValue]);
+
   const onSubmit = async (data: {
     key: string;
     content: string;
@@ -162,12 +179,12 @@ const SendMessage: React.FC = () => {
             <Controller
               control={control}
               name="key"
-              render={({ field: { name, onChange } }) => (
+              render={({ field: { name, onChange, value } }) => (
                 <Editor
                   readOnly={isSubmitting}
-                  defaultValue={keyDefaultValue}
                   name={name}
                   onChange={onChange}
+                  value={value}
                 />
               )}
             />
@@ -177,12 +194,12 @@ const SendMessage: React.FC = () => {
             <Controller
               control={control}
               name="content"
-              render={({ field: { name, onChange } }) => (
+              render={({ field: { name, onChange, value } }) => (
                 <Editor
                   readOnly={isSubmitting}
-                  defaultValue={contentDefaultValue}
                   name={name}
                   onChange={onChange}
+                  value={value}
                 />
               )}
             />