@bpmn-io/form-js-viewer 1.7.0-alpha.0 → 1.7.0

package/dist/index.cjs

@@ -1851,6 +1851,10 @@ function FormField(props) {
   const {
     formId
   } = hooks.useContext(FormContext);
+
+  // track whether we should trigger initial validation on certain actions, e.g. field blur
+  // disabled straight away, if viewerCommands are not available
+  const [initialValidationTrigger, setInitialValidationTrigger] = hooks.useState(!!viewerCommands);
   const FormFieldComponent = formFields.get(field.type);
   if (!FormFieldComponent) {
     throw new Error(`cannot render field <${field.type}>`);
@@ -1864,26 +1868,47 @@ function FormField(props) {
 
   // add precedence: global readonly > form field disabled
   const disabled = !properties.readOnly && (properties.disabled || field.disabled || false);
+
+  // ensures the initial validation behavior can be re-triggered upon form reset
+  hooks.useEffect(() => {
+    if (!viewerCommands) {
+      return;
+    }
+    const resetValidation = () => {
+      setInitialValidationTrigger(true);
+    };
+    eventBus.on('import.done', resetValidation);
+    eventBus.on('reset', resetValidation);
+    return () => {
+      eventBus.off('import.done', resetValidation);
+      eventBus.off('reset', resetValidation);
+    };
+  }, [eventBus, viewerCommands]);
+  hooks.useEffect(() => {
+    if (initialValidationTrigger && initialValue) {
+      setInitialValidationTrigger(false);
+      viewerCommands.updateFieldValidation(field, initialValue, indexes);
+    }
+  }, [viewerCommands, field, initialValue, initialValidationTrigger, indexes]);
   const onBlur = hooks.useCallback(() => {
-    if (viewerCommands) {
+    if (initialValidationTrigger) {
+      setInitialValidationTrigger(false);
       viewerCommands.updateFieldValidation(field, value, indexes);
     }
     eventBus.fire('formField.blur', {
       formField: field
     });
-  }, [eventBus, viewerCommands, field, value, indexes]);
+  }, [eventBus, field, indexes, value, viewerCommands, initialValidationTrigger]);
   const onFocus = hooks.useCallback(() => {
     eventBus.fire('formField.focus', {
       formField: field
     });
   }, [eventBus, field]);
-  hooks.useEffect(() => {
-    if (viewerCommands && initialValue) {
-      viewerCommands.updateFieldValidation(field, initialValue, indexes);
-    }
-  }, [viewerCommands, field, initialValue, indexes]);
   const hidden = useCondition(field.conditional && field.conditional.hide || null);
   const onChangeIndexed = hooks.useCallback(update => {
+    // any data change will trigger validation
+    setInitialValidationTrigger(false);
+
     // add indexes of the keyed field to the update, if any
     onChange(FormFieldComponent.config.keyed ? {
       ...update,
@@ -4942,7 +4967,7 @@ function Textarea(props) {
     required
   } = validate;
   const textareaRef = hooks.useRef();
-  const [onInputChange, flushOnChange] = useFlushDebounce(({
+  const [onChange, flushOnChange] = useFlushDebounce(({
     target
   }) => {
     props.onChange({
@@ -4957,6 +4982,12 @@ function Textarea(props) {
   const onInputFocus = () => {
     onFocus && onFocus();
   };
+  const onInputChange = event => {
+    onChange({
+      target: event.target
+    });
+    autoSizeTextarea(textareaRef.current);
+  };
   hooks.useLayoutEffect(() => {
     autoSizeTextarea(textareaRef.current);
   }, [value]);
@@ -8112,10 +8143,10 @@ class Form {
     }
   }
   clear() {
-    // clear form services
+    // clear diagram services (e.g. EventBus)
     this._emit('diagram.clear');
 
-    // clear diagram services (e.g. EventBus)
+    // clear form services
     this._emit('form.clear');
   }