Repository: provectus/kafka-ui
Issue: Cannot create a Kafka topic in Kafka-UI for Confluent Kafka
Labels: type/bug
scope/frontend
status/accepted
status/confirmed
type/regression

**Describe the bug**

I cannot create a Kafka topic in Kafka-UI for Confluent Kafka.

**Set up**

Docker images:

Kafka UI: provectuslabs/kafka-ui:master
Confluent Kafka: confluentinc/cp-kafka:6.1.0

**Steps to Reproduce**

1. Go to Kafka UI topic creation page -> http://[local-ip]:[local-port]/ui/clusters/[cluster-name]/topics/create-new
2. Fill in the topic name such as "go"
3. Click "Send" to create the topic
4. Nothing will happen for you

**Expected behavior**

The topic name "go" should be created.

**Screenshots**

![Kafka UI can't create a topic](https://i.ibb.co/xqLF0zh/Screenshot-2565-01-24-at-00-56-14.png)

**Additional context**

I used Confluent Kafka on premise which setup with kubeadm

Issue comments:
Hello there dmakeroam! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀
Can you help to review this ? @workshur 
We've reproduced the issue We'll release a minor patch to address the problem soon.
Available in `master`-labeled image.

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Connect/New/New.tsx b/kafka-ui-react-app/src/components/Connect/New/New.tsx
index 88b1efef59f..18b80313fad 100644
--- a/kafka-ui-react-app/src/components/Connect/New/New.tsx
+++ b/kafka-ui-react-app/src/components/Connect/New/New.tsx
@@ -127,6 +127,7 @@ const New: React.FC<NewProps> = ({
         <div className={['field', connectNameFieldClassName].join(' ')}>
           <InputLabel>Connect *</InputLabel>
           <Controller
+            defaultValue={connectOptions[0].value}
             control={control}
             name="connectName"
             render={({ field: { name, onChange } }) => (
diff --git a/kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx b/kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx
index 5e59075b0af..59a0b75ba8a 100644
--- a/kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Edit/Edit.tsx
@@ -86,6 +86,7 @@ const Edit: React.FC = () => {
             <div>
               <InputLabel>Type</InputLabel>
               <Controller
+                defaultValue={schema.schemaType}
                 control={control}
                 rules={{ required: true }}
                 name="schemaType"
@@ -108,6 +109,9 @@ const Edit: React.FC = () => {
             <div>
               <InputLabel>Compatibility level</InputLabel>
               <Controller
+                defaultValue={
+                  schema.compatibilityLevel as CompatibilityLevelCompatibilityEnum
+                }
                 control={control}
                 name="compatibilityLevel"
                 render={({ field: { name, onChange } }) => (
diff --git a/kafka-ui-react-app/src/components/Schemas/New/New.tsx b/kafka-ui-react-app/src/components/Schemas/New/New.tsx
index db143566301..6f753e38b24 100644
--- a/kafka-ui-react-app/src/components/Schemas/New/New.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/New/New.tsx
@@ -99,6 +99,7 @@ const New: React.FC = () => {
         <div>
           <InputLabel>Schema Type *</InputLabel>
           <Controller
+            defaultValue={SchemaTypeOptions[0].value as SchemaType}
             control={control}
             rules={{ required: 'Schema Type is required.' }}
             name="schemaType"
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 7d596e63c1a..7eaccd51e09 100644
--- a/kafka-ui-react-app/src/components/Topics/New/New.tsx
+++ b/kafka-ui-react-app/src/components/Topics/New/New.tsx
@@ -21,9 +21,10 @@ interface RouterParams {
 
 const New: React.FC = () => {
   const methods = useForm<TopicFormData>({
-    mode: 'onTouched',
+    mode: 'all',
     resolver: yupResolver(topicFormValidationSchema),
   });
+
   const { clusterName } = useParams<RouterParams>();
   const history = useHistory();
   const dispatch = useDispatch();
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx
index 95042574085..3d214953914 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx
@@ -115,6 +115,7 @@ const TopicForm: React.FC<Props> = ({
           <div>
             <InputLabel>Cleanup policy</InputLabel>
             <Controller
+              defaultValue={CleanupPolicyOptions[0].value}
               control={control}
               name="cleanupPolicy"
               render={({ field: { name, onChange } }) => (
@@ -142,6 +143,7 @@ const TopicForm: React.FC<Props> = ({
               <Controller
                 control={control}
                 name="retentionBytes"
+                defaultValue={0}
                 render={({ field: { name, onChange } }) => (
                   <Select
                     name={name}


Test patch: