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 index efd0306c7..b5605f42c 100644 --- 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 index 443b66c0e..febd87004 100644 --- 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 index 387ab337b..06791f7c0 100644 --- 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 (