add fuzz to the id attribute of a checkbox so the carbon element knows what has been clicked w/ burnettk (#482)

Co-authored-by: jasquat <jasquat@users.noreply.github.com>

spiffworkflow-frontend/src/rjsf/carbon_theme/CheckboxWidget/CheckboxWidget.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Checkbox } from '@carbon/react';
 import { WidgetProps } from '@rjsf/utils';
-import { getCommonAttributes } from '../../helpers';
+import { getCommonAttributes, makeid } from '../../helpers';
 
 function CheckboxWidget(props: WidgetProps) {
   const {
@@ -42,10 +42,16 @@ function CheckboxWidget(props: WidgetProps) {
     rawErrors
   );
 
+  // if the parent rjsf schema is not of type "object", then rjsf sends "root" through as the id.
+  // this creates issues with the carbon checkbox where it will not accept any clicks to the checkbox
+  // so add fuzz to the id to ensure it is unique.
+  // https://github.com/rjsf-team/react-jsonschema-form/issues/1824
+  const uniqueId = makeid(10);
+
   return (
     <Checkbox
-      id={id}
-      name={id}
+      id={uniqueId}
+      name={uniqueId}
       checked={typeof value === 'undefined' ? false : Boolean(value)}
       disabled={disabled || readonly}
       title={commonAttributes.tooltipText}

spiffworkflow-frontend/src/rjsf/carbon_theme/CheckboxesWidget/CheckboxesWidget.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormGroup from '@mui/material/FormGroup';
-import FormLabel from '@mui/material/FormLabel';
 import { WidgetProps } from '@rjsf/utils';
 
 const selectValue = (value: any, selected: any, all: any) => {
@@ -54,36 +53,34 @@ function CheckboxesWidget({
   }: React.FocusEvent<HTMLButtonElement>) => onFocus(id, value);
 
   return (
-    <>
-      <FormGroup id={id} row={!!inline}>
-        {Array.isArray(enumOptions) &&
-          enumOptions.map((option, index: number) => {
-            const checked = value.indexOf(option.value) !== -1;
-            const itemDisabled =
-              Array.isArray(enumDisabled) &&
-              enumDisabled.indexOf(option.value) !== -1;
-            const checkbox = (
-              <Checkbox
-                id={`${id}-${option.value}`}
-                name={id}
-                checked={checked}
-                disabled={disabled || itemDisabled || readonly}
-                autoFocus={autofocus && index === 0}
-                onChange={_onChange(option)}
-                onBlur={_onBlur}
-                onFocus={_onFocus}
-              />
-            );
-            return (
-              <FormControlLabel
-                control={checkbox}
-                key={option.value}
-                label={option.label}
-              />
-            );
-          })}
-      </FormGroup>
-    </>
+    <FormGroup id={id} row={!!inline}>
+      {Array.isArray(enumOptions) &&
+        enumOptions.map((option, index: number) => {
+          const checked = value.indexOf(option.value) !== -1;
+          const itemDisabled =
+            Array.isArray(enumDisabled) &&
+            enumDisabled.indexOf(option.value) !== -1;
+          const checkbox = (
+            <Checkbox
+              id={`${id}-${option.value}`}
+              name={id}
+              checked={checked}
+              disabled={disabled || itemDisabled || readonly}
+              autoFocus={autofocus && index === 0}
+              onChange={_onChange(option)}
+              onBlur={_onBlur}
+              onFocus={_onFocus}
+            />
+          );
+          return (
+            <FormControlLabel
+              control={checkbox}
+              key={option.value}
+              label={option.label}
+            />
+          );
+        })}
+    </FormGroup>
   );
 }
 

spiffworkflow-frontend/src/rjsf/helpers.tsx

@@ -45,3 +45,14 @@ export const getCommonAttributes = (
     tooltipText,
   };
 };
+
+// https://stackoverflow.com/a/1349426/6090676
+export const makeid = (length: number) => {
+  let result = '';
+  const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
+  const charactersLength = characters.length;
+  for (let i = 0; i < length; i += 1) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+};