@bpmn-io/properties-panel 1.5.1 → 1.6.0

package/dist/index.esm.js

@@ -2458,6 +2458,7 @@ function Select(props) {
  * @param {Function} props.onBlur
  * @param {Function} props.getOptions
  * @param {boolean} [props.disabled]
+ * @param {Function} [props.validate]
  */
 function SelectEntry(props) {
   const {
@@ -2470,11 +2471,37 @@ function SelectEntry(props) {
     getOptions,
     disabled,
     onFocus,
-    onBlur
+    onBlur,
+    validate
   } = props;
-  const value = getValue(element);
   const options = getOptions(element);
-  const error = useError(id);
+  const [cachedInvalidValue, setCachedInvalidValue] = useState(null);
+  const globalError = useError(id);
+  const [localError, setLocalError] = useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  useEffect(() => {
+    if (isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setLocalError(newValidationError);
+    }
+  }, [value]);
+  const onChange = newValue => {
+    let newValidationError = null;
+    if (isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+    if (newValidationError) {
+      setCachedInvalidValue(newValue);
+    } else {
+      setValue(newValue);
+    }
+    setLocalError(newValidationError);
+  };
+  if (previousValue === value && localError) {
+    value = cachedInvalidValue;
+  }
+  const error = globalError || localError;
   return jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
@@ -2482,7 +2509,7 @@ function SelectEntry(props) {
       id: id,
       label: label,
       value: value,
-      onChange: setValue,
+      onChange: onChange,
       onFocus: onFocus,
       onBlur: onBlur,
       options: options,