Merge pull request #214 from TouK/fix-issue-with-radio-buttons

fix: Resolve an issue with radio buttons
TouK · Oct 16, 2024 · 6cf9222 · 6cf9222
2 parents 7f9f08e + ba61d02
commit 6cf9222
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/src/components/editTopicDialog.tsx b/src/components/editTopicDialog.tsx
@@ -1,6 +1,6 @@
-import { FormControl, FormControlLabel, FormLabel, Radio } from "@mui/material";
+import { FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from "@mui/material";
 import { Field, FormikErrors } from "formik";
-import { CheckboxWithLabel, RadioGroup, TextField } from "formik-mui";
+import { CheckboxWithLabel, TextField } from "formik-mui";
 import { observer } from "mobx-react-lite";
 import React from "react";
 import { TopicFormikValues } from "../models";
@@ -52,7 +52,7 @@ export const EditTopicDialog = observer(() => {
         <Field required component={TextField} autoFocus label="Topic description" name="description" key="description" fullWidth />,
         <FormControl key="contentType">
             <FormLabel>ContentType</FormLabel>
-            <Field component={RadioGroup} row name={"contentType"}>
+            <Field as={RadioGroup} row name={"contentType"}>
                 <FormControlLabel value="AVRO" control={<Radio />} label="AVRO" />
                 <FormControlLabel value="JSON" control={<Radio />} label="JSON" />
             </Field>
@@ -76,7 +76,7 @@ export const EditTopicDialog = observer(() => {
     const advancedFields = (): JSX.Element[] => [
         <FormControl key="advancedValues.acknowledgement">
             <FormLabel>Acknowledgement</FormLabel>
-            <Field component={RadioGroup} row name={"advancedValues.acknowledgement"}>
+            <Field as={RadioGroup} row name={"advancedValues.acknowledgement"}>
                 <FormControlLabel value="LEADER" control={<Radio />} label="LEADER" />
                 <FormControlLabel value="ALL" control={<Radio />} label="ALL" />
             </Field>

diff --git a/src/components/subscriptionDialog.tsx b/src/components/subscriptionDialog.tsx
@@ -1,6 +1,6 @@
-import { FormControl, FormControlLabel, FormLabel, Radio } from "@mui/material";
+import { FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from "@mui/material";
 import { Field, FormikErrors } from "formik";
-import { CheckboxWithLabel, RadioGroup, TextField } from "formik-mui";
+import { CheckboxWithLabel, TextField } from "formik-mui";
 import { observer, useObserver } from "mobx-react-lite";
 import React from "react";
 import { useLocation, useNavigate } from "react-router-dom";
@@ -73,7 +73,7 @@ export const SubscriptionDialog = ({
     const advancedFields = (): JSX.Element[] => [
         <FormControl key="advancedValues.mode">
             <FormLabel>Mode</FormLabel>
-            <Field component={RadioGroup} row name={"advancedValues.mode"}>
+            <Field as={RadioGroup} row name={"advancedValues.mode"}>
                 <FormControlLabel value="ANYCAST" control={<Radio />} label="ANYCAST" />
                 <FormControlLabel value="BROADCAST" control={<Radio />} label="BROADCAST" />
             </Field>
@@ -129,7 +129,7 @@ export const SubscriptionDialog = ({
         />,
         <FormControl key="advancedValues.trackingMode">
             <FormLabel>Tracking mode</FormLabel>
-            <Field component={RadioGroup} row name={"advancedValues.trackingMode"}>
+            <Field as={RadioGroup} row name={"advancedValues.trackingMode"}>
                 <FormControlLabel value="trackingOff" control={<Radio />} label="No tracking" />
                 <FormControlLabel value="discardedOnly" control={<Radio />} label="Track message discarding only" />
                 <FormControlLabel value="trackingAll" control={<Radio />} label="Track everything" />

diff --git a/src/components/topicDialog.tsx b/src/components/topicDialog.tsx
@@ -1,6 +1,6 @@
-import { Box, Button, FormControl, FormControlLabel, FormLabel, Radio } from "@mui/material";
+import { Box, Button, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from "@mui/material";
 import { Field, FormikErrors } from "formik";
-import { CheckboxWithLabel, RadioGroup, TextField } from "formik-mui";
+import { CheckboxWithLabel, TextField } from "formik-mui";
 import { observer } from "mobx-react-lite";
 import React from "react";
 import { useNavigate } from "react-router-dom";
@@ -54,7 +54,7 @@ export const TopicDialog = observer(
             <Field required component={TextField} label="Topic description" name="description" key="description" fullWidth />,
             <FormControl key="contentType">
                 <FormLabel>ContentType</FormLabel>
-                <Field component={RadioGroup} row name={"contentType"}>
+                <Field as={RadioGroup} row name={"contentType"}>
                     <FormControlLabel value="AVRO" control={<Radio />} label="AVRO" />
                     <FormControlLabel value="JSON" control={<Radio />} label="JSON" />
                 </Field>
@@ -78,7 +78,7 @@ export const TopicDialog = observer(
         const advancedFields = (): JSX.Element[] => [
             <FormControl key="advancedValues.acknowledgement">
                 <FormLabel>Acknowledgement</FormLabel>
-                <Field component={RadioGroup} row name={"advancedValues.acknowledgement"}>
+                <Field as={RadioGroup} row name={"advancedValues.acknowledgement"}>
                     <FormControlLabel value="LEADER" control={<Radio />} label="LEADER" />
                     <FormControlLabel value="ALL" control={<Radio />} label="ALL" />
                 </Field>