fix: properly handle all formats of options sources

packages/form-js-viewer/package.json

@@ -52,6 +52,7 @@
     "feelin": "^3.0.0",
     "flatpickr": "^4.6.13",
     "ids": "^1.0.0",
+    "lodash.isequal": "^4.5.0",
     "min-dash": "^4.0.0",
     "preact": "^10.5.14",
     "preact-markup": "^2.1.1",

packages/form-js-viewer/src/render/components/form-fields/Checklist.js

@@ -2,12 +2,13 @@ import { useRef } from 'preact/hooks';
 import useOptionsAsync, { LOAD_STATES } from '../../hooks/useOptionsAsync';
 import useCleanupMultiSelectValues from '../../hooks/useCleanupMultiSelectValues';
 import classNames from 'classnames';
+import isEqual from 'lodash/isEqual';
 
 import Description from '../Description';
 import Errors from '../Errors';
 import Label from '../Label';
 
-import { sanitizeMultiSelectValue } from '../util/sanitizerUtil';
+import { sanitizeMultiSelectValue, hasEqualValue } from '../util/sanitizerUtil';
 
 import { createEmptyOptions } from '../util/optionsUtil';
 
@@ -41,19 +42,15 @@ export default function Checklist(props) {
 
   const { required } = validate;
 
-  const toggleCheckbox = (v) => {
+  const toggleCheckbox = (toggledValue) => {
 
-    let newValue = [ ...values ];
-
-    if (!newValue.includes(v)) {
-      newValue.push(v);
-    } else {
-      newValue = newValue.filter(x => x != v);
-    }
+    const newValues = hasEqualValue(toggledValue, values)
+      ? values.filter(value => !isEqual(value, toggledValue))
+      : [ ...values, toggledValue ];
 
     props.onChange({
       field,
-      value: newValue,
+      value: newValues,
     });
   };
 
@@ -96,17 +93,18 @@ export default function Checklist(props) {
       loadState == LOAD_STATES.LOADED && options.map((o, index) => {
 
         const itemDomId = `${domId}-${index}`;
+        const isChecked = hasEqualValue(o.value, values);
 
         return (
           <Label
             id={ itemDomId }
             label={ o.label }
             class={ classNames({
-              'fjs-checked': values.includes(o.value)
+              'fjs-checked': isChecked
             }) }
             required={ false }>
             <input
-              checked={ values.includes(o.value) }
+              checked={ isChecked }
               class="fjs-input"
               disabled={ disabled }
               readOnly={ readonly }

packages/form-js-viewer/src/render/components/form-fields/Radio.js

@@ -1,4 +1,5 @@
 import { useRef } from 'preact/hooks';
+import isEqual from 'lodash/isEqual';
 import useOptionsAsync, { LOAD_STATES } from '../../hooks/useOptionsAsync';
 import useCleanupSingleSelectValue from '../../hooks/useCleanupSingleSelectValue';
 import classNames from 'classnames';
@@ -85,16 +86,17 @@ export default function Radio(props) {
       loadState == LOAD_STATES.LOADED && options.map((option, index) => {
 
         const itemDomId = `${domId}-${index}`;
+        const isChecked = isEqual(option.value, value);
 
         return (
           <Label
             id={ itemDomId }
             key={ index }
             label={ option.label }
-            class={ classNames({ 'fjs-checked': option.value === value }) }
+            class={ classNames({ 'fjs-checked': isChecked }) }
             required={ false }>
             <input
-              checked={ option.value === value }
+              checked={ isChecked }
               class="fjs-input"
               disabled={ disabled }
               readOnly={ readonly }