revert to working mui radio

spiffworkflow-frontend/src/routes/TaskShow.tsx

@@ -3,6 +3,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
 
 // FIXME: npm install @rjsf/validator-ajv8 and use it as soon as
 // rawErrors is fixed.
+// https://react-jsonschema-form.readthedocs.io/en/latest/usage/validation/
 // https://github.com/rjsf-team/react-jsonschema-form/issues/2309 links to a codesandbox that might be useful to fork
 // if we wanted to file a defect against rjsf to show the difference between validator-ajv6 and validator-ajv8.
 // https://github.com/rjsf-team/react-jsonschema-form/blob/main/docs/api-reference/uiSchema.md talks about rawErrors

spiffworkflow-frontend/src/themes/carbon/RadioWidget/RadioWidget.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
-// @ts-ignore
-import { RadioButtonGroup, RadioButton } from '@carbon/react';
-import { WidgetProps } from '@rjsf/utils';
+import React from "react";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormLabel from "@mui/material/FormLabel";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
+import { WidgetProps } from "@rjsf/utils";
 
-function RadioWidget({
+const RadioWidget = ({
   id,
   schema,
   options,
@@ -15,11 +17,11 @@ function RadioWidget({
   onChange,
   onBlur,
   onFocus,
-}: WidgetProps) {
+}: WidgetProps) => {
   const { enumOptions, enumDisabled } = options;
 
-  const localOnChange = (_: any, value: any) =>
-    onChange(schema.type == 'boolean' ? value !== 'false' : value);
+  const _onChange = (_: any, value: any) =>
+    onChange(schema.type == "boolean" ? value !== "false" : value);
   const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
     onBlur(id, value);
   const _onFocus = ({
@@ -29,14 +31,16 @@ function RadioWidget({
   const row = options ? options.inline : false;
 
   return (
-    <RadioButtonGroup
-      orientation="vertical"
+    <>
+      <FormLabel required={required} htmlFor={id}>
+        {label || schema.title}
+      </FormLabel>
+      <RadioGroup
         id={id}
         name={id}
         value={`${value}`}
         row={row as boolean}
-      legendText={label || schema.title}
-      onChange={localOnChange}
+        onChange={_onChange}
         onBlur={_onBlur}
         onFocus={_onFocus}
       >
@@ -45,18 +49,27 @@ function RadioWidget({
             const itemDisabled =
               Array.isArray(enumDisabled) &&
               enumDisabled.indexOf(option.value) !== -1;
-          return (
-            <RadioButton
-              labelText={`${option.label}`}
-              value={`${option.value}`}
+            const radio = (
+              <FormControlLabel
+                control={
+                  <Radio
+                    name={id}
                     id={`${id}-${option.value}`}
+                    color="primary"
+                  />
+                }
+                label={`${option.label}`}
+                value={`${option.value}`}
                 key={option.value}
                 disabled={disabled || itemDisabled || readonly}
               />
             );
+
+            return radio;
           })}
-    </RadioButtonGroup>
+      </RadioGroup>
+    </>
   );
-}
+};
 
 export default RadioWidget;