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,34 +31,45 @@ function RadioWidget({
   const row = options ? options.inline : false;
 
   return (
-    <RadioButtonGroup
-      orientation="vertical"
-      id={id}
-      name={id}
-      value={`${value}`}
-      row={row as boolean}
-      legendText={label || schema.title}
-      onChange={localOnChange}
-      onBlur={_onBlur}
-      onFocus={_onFocus}
-    >
-      {Array.isArray(enumOptions) &&
-        enumOptions.map((option) => {
-          const itemDisabled =
-            Array.isArray(enumDisabled) &&
-            enumDisabled.indexOf(option.value) !== -1;
-          return (
-            <RadioButton
-              labelText={`${option.label}`}
-              value={`${option.value}`}
-              id={`${id}-${option.value}`}
-              key={option.value}
-              disabled={disabled || itemDisabled || readonly}
-            />
-          );
-        })}
-    </RadioButtonGroup>
+    <>
+      <FormLabel required={required} htmlFor={id}>
+        {label || schema.title}
+      </FormLabel>
+      <RadioGroup
+        id={id}
+        name={id}
+        value={`${value}`}
+        row={row as boolean}
+        onChange={_onChange}
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+      >
+        {Array.isArray(enumOptions) &&
+          enumOptions.map((option) => {
+            const itemDisabled =
+              Array.isArray(enumDisabled) &&
+              enumDisabled.indexOf(option.value) !== -1;
+            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;
+          })}
+      </RadioGroup>
+    </>
   );
-}
+};
 
 export default RadioWidget;