fix: ensure values not in options clear

Closes #817
bpmn-io · Nov 23, 2023 · e00d49d · e00d49d
1 parent c4b98f3
commit e00d49d
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 3 deletions.
diff --git a/packages/form-js-viewer/src/render/components/form-fields/Checklist.js b/packages/form-js-viewer/src/render/components/form-fields/Checklist.js
@@ -1,5 +1,6 @@
-import { useContext, useEffect, useRef } from 'preact/hooks';
+import { useContext, useRef } from 'preact/hooks';
 import useOptionsAsync, { LOAD_STATES } from '../../hooks/useOptionsAsync';
+import useRestrictedMultiSelectValues from '../../hooks/useRestrictedMultiSelectValues';
 import classNames from 'classnames';
 import { FormContext } from '../../context';
 
@@ -80,6 +81,14 @@ export default function Checklist(props) {
     options
   } = useOptionsAsync(field);
 
+  useRestrictedMultiSelectValues({
+    field,
+    loadState,
+    options,
+    values,
+    onChange: props.onChange
+  });
+
   const { formId } = useContext(FormContext);
   const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
 

diff --git a/packages/form-js-viewer/src/render/components/form-fields/Radio.js b/packages/form-js-viewer/src/render/components/form-fields/Radio.js
@@ -1,5 +1,6 @@
 import { useContext, useRef } from 'preact/hooks';
 import useOptionsAsync, { LOAD_STATES } from '../../hooks/useOptionsAsync';
+import useRestrictedSingleSelectValue from '../../hooks/useRestrictedSingleSelectValue';
 import classNames from 'classnames';
 import { FormContext } from '../../context';
 
@@ -69,6 +70,14 @@ export default function Radio(props) {
     options
   } = useOptionsAsync(field);
 
+  useRestrictedSingleSelectValue({
+    field,
+    loadState,
+    options,
+    value,
+    onChange: props.onChange
+  });
+
   const { formId } = useContext(FormContext);
   const errorMessageId = errors.length === 0 ? undefined : `${prefixId(id, formId)}-error-message`;
 

diff --git a/packages/form-js-viewer/src/render/components/form-fields/Taglist.js b/packages/form-js-viewer/src/render/components/form-fields/Taglist.js
@@ -1,7 +1,8 @@
 import { useContext, useMemo, useRef, useState } from 'preact/hooks';
 
-import useOptionsAsync, { LOAD_STATES } from '../../hooks/useOptionsAsync';
 import { useService } from '../../hooks';
+import useOptionsAsync, { LOAD_STATES } from '../../hooks/useOptionsAsync';
+import useRestrictedMultiSelectValues from '../../hooks/useRestrictedMultiSelectValues';
 
 import { FormContext } from '../../context';
 import classNames from 'classnames';
@@ -59,6 +60,14 @@ export default function Taglist(props) {
     options
   } = useOptionsAsync(field);
 
+  useRestrictedMultiSelectValues({
+    field,
+    loadState,
+    options,
+    values,
+    onChange: props.onChange
+  });
+
   // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
   const valueToOptionMap = useMemo(() => Object.assign({}, ...options.map((o, x) => ({ [o.value]:  options[x] }))), [ options ]);
 
@@ -189,7 +198,7 @@ export default function Taglist(props) {
               return (
                 <div class={ classNames('fjs-taglist-tag', { 'fjs-disabled': disabled, 'fjs-readonly': readonly }) } onMouseDown={ (e) => e.preventDefault() }>
                   <span class="fjs-taglist-tag-label">
-                    {valueToOptionMap[v] ? valueToOptionMap[v].label : `unexpected value{${v}}`}
+                    { valueToOptionMap[v].label }
                   </span>
                   { (!disabled && !readonly) && <button
                     type="button"

diff --git a/packages/form-js-viewer/src/render/components/form-fields/parts/SearchableSelect.js b/packages/form-js-viewer/src/render/components/form-fields/parts/SearchableSelect.js
@@ -1,6 +1,7 @@
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import useOptionsAsync, { LOAD_STATES } from '../../../hooks/useOptionsAsync';
 import { useService } from '../../../hooks';
+import useRestrictedSingleSelectValue from '../../../hooks/useRestrictedSingleSelectValue';
 
 import { FormContext } from '../../../context';
 
@@ -41,6 +42,14 @@ export default function SearchableSelect(props) {
     options
   } = useOptionsAsync(field);
 
+  useRestrictedSingleSelectValue({
+    field,
+    loadState,
+    options,
+    value,
+    onChange: props.onChange
+  });
+
   // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
   const valueToOptionMap = useMemo(() => Object.assign({}, ...options.map((o, x) => ({ [o.value]: options[x] }))), [ options ]);
 

diff --git a/packages/form-js-viewer/src/render/components/form-fields/parts/SimpleSelect.js b/packages/form-js-viewer/src/render/components/form-fields/parts/SimpleSelect.js
@@ -1,5 +1,6 @@
 import { useCallback, useContext, useMemo, useRef, useState } from 'preact/hooks';
 import useOptionsAsync, { LOAD_STATES } from '../../../hooks/useOptionsAsync';
+import useRestrictedSingleSelectValue from '../../../hooks/useRestrictedSingleSelectValue';
 
 import { FormContext } from '../../../context';
 
@@ -38,6 +39,14 @@ export default function SimpleSelect(props) {
     options
   } = useOptionsAsync(field);
 
+  useRestrictedSingleSelectValue({
+    field,
+    loadState,
+    options,
+    value,
+    onChange: props.onChange
+  });
+
   // We cache a map of option values to their index so that we don't need to search the whole options array every time to correlate the label
   const valueToOptionMap = useMemo(() => Object.assign({}, ...options.map((o, x) => ({ [o.value]: options[x] }))), [ options ]);
 

diff --git a/packages/form-js-viewer/src/render/hooks/useRestrictedMultiSelectValues.js b/packages/form-js-viewer/src/render/hooks/useRestrictedMultiSelectValues.js
@@ -0,0 +1,32 @@
+import { useEffect } from 'preact/hooks';
+import { LOAD_STATES } from './useOptionsAsync';
+
+export default function(props) {
+
+  const {
+    field,
+    options,
+    loadState,
+    onChange,
+    values
+  } = props;
+
+  // Ensures that the values are always a subset of the options
+  useEffect(() => {
+
+    if (loadState !== LOAD_STATES.LOADED) {
+      return;
+    }
+
+    const hasValuesNotInOptions = values.some(v => !options.map(o => o.value).includes(v));
+
+    if (hasValuesNotInOptions) {
+      onChange({
+        field,
+        value: values.filter(v => options.map(o => o.value).includes(v))
+      });
+    }
+
+  }, [ field, options, onChange, JSON.stringify(values), loadState ]);
+
+}
diff --git a/packages/form-js-viewer/src/render/hooks/useRestrictedSingleSelectValue.js b/packages/form-js-viewer/src/render/hooks/useRestrictedSingleSelectValue.js
@@ -0,0 +1,31 @@
+import { useEffect } from 'preact/hooks';
+import { LOAD_STATES } from './useOptionsAsync';
+
+export default function(props) {
+
+  const {
+    field,
+    options,
+    loadState,
+    onChange,
+    value
+  } = props;
+
+  useEffect(() => {
+
+    if (loadState !== LOAD_STATES.LOADED) {
+      return;
+    }
+
+    const hasValueNotInOptions = value && !options.map(o => o.value).includes(value);
+
+    if (hasValueNotInOptions) {
+      onChange({
+        field,
+        value: null
+      });
+    }
+
+  }, [ field, options, onChange, value, loadState ]);
+
+}