Repository: provectus/kafka-ui
Issue: Generated messages (key & content) are being sent as nulls if not changed
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Describe the bug**
"Lorem ipsum"-ish messages generated by default are being sent as null if corresponding fields are not changed (e.g. headers are being changed). This behaviour is not clear.


**Set up**
docker-compose -f kafka-ui.yaml

**Steps to Reproduce**
Steps to reproduce the behavior:
1. Press produce message button
2. Change headers (add "1" to the end and backspace it)
3. Press send message

**Expected behavior**
Generated content is being sent

Issue comments:

Pull request review comments:
Is there a point in `useMemo` in `defaultValues`?

I'm not sure if it's needed 
bcs we should memo changes of keyDefaultValue, contentDefaultValue to prevent rerender of it 
> The defaultValues for inputs are used as the initial value when a component is first rendered, before a user interacts with it. It is encouraged that you set defaultValues for all inputs to non-undefined values such as the empty string or null.

> defaultValues are cached on the first render within the custom hook. If you want to [reset](https://react-hook-form.com/api/useform/reset) the defaultValues, you should use the reset api.

I see no need in useMemo here

Patch that resolved the issue:
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 ee1ba03de4a..d6f987d9ffc 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}
                 />
               )}
             />


Test patch: