diff --git a/spiffworkflow-frontend/src/rjsf/carbon_theme/CheckboxWidget/CheckboxWidget.tsx b/spiffworkflow-frontend/src/rjsf/carbon_theme/CheckboxWidget/CheckboxWidget.tsx index 005a9f3ae..507f577cf 100644 --- a/spiffworkflow-frontend/src/rjsf/carbon_theme/CheckboxWidget/CheckboxWidget.tsx +++ b/spiffworkflow-frontend/src/rjsf/carbon_theme/CheckboxWidget/CheckboxWidget.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { Checkbox } from '@carbon/react'; import { WidgetProps } from '@rjsf/utils'; import { getCommonAttributes, makeid } from '../../helpers'; @@ -19,6 +19,11 @@ function CheckboxWidget(props: WidgetProps) { rawErrors, required, } = props; + + const uniqueId: string = useMemo(() => { + return makeid(10, 'checkbox-'); + }, []); + const _onChange = (_: any, newValue: any) => { // if this field is required and it is not checked then change the value to undefined // otherwise rjsf will not flag this field as invalid @@ -42,12 +47,6 @@ 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 ( { + return makeid(10, 'radio-button-'); + }, []); const _onChange = (newValue: any, _radioButtonId: any) => { if (schema.type === 'boolean') { @@ -47,8 +50,8 @@ function RadioWidget({ // pass values in as strings so we can support both boolean and string radio buttons return ( { return ( diff --git a/spiffworkflow-frontend/src/rjsf/helpers.tsx b/spiffworkflow-frontend/src/rjsf/helpers.tsx index ae87f9d19..7f6c8362d 100644 --- a/spiffworkflow-frontend/src/rjsf/helpers.tsx +++ b/spiffworkflow-frontend/src/rjsf/helpers.tsx @@ -52,9 +52,14 @@ export const getCommonAttributes = ( }; }; +// this is useful for certain carbon elements where if they do not have a unique id on groups +// then odd things will happen. Examples: +// * radio button groups will deselect the item from a group when selecting one from a different group +// * checkboxes will not accept any clicks to the checkbox +// https://github.com/rjsf-team/react-jsonschema-form/issues/1824 // https://stackoverflow.com/a/1349426/6090676 -export const makeid = (length: number) => { - let result = ''; +export const makeid = (length: number, prefix: string = '') => { + let result = prefix; const characters = 'abcdefghijklmnopqrstuvwxyz0123456789'; const charactersLength = characters.length; for (let i = 0; i < length; i += 1) {