fix: prevent expressions from recomputing more than once

Closes #1151

packages/form-js-viewer/src/Form.js

@@ -1,7 +1,13 @@
 import Ids from 'ids';
 import { get, isObject, isString, isUndefined, set } from 'min-dash';
 
-import { ExpressionLanguageModule, MarkdownRendererModule, ViewerCommandsModule, RepeatRenderModule } from './features';
+import {
+  ExpressionLanguageModule,
+  ExpressionFieldModule,
+  MarkdownRendererModule,
+  ViewerCommandsModule,
+  RepeatRenderModule,
+} from './features';
 
 import { CoreModule } from './core';
 
@@ -317,7 +323,7 @@ export class Form {
   /**
    * @internal
    *
-   * @param { { add?: boolean, field: any, indexes: object, remove?: number, value?: any } } update
+   * @param { { field: any, indexes: object, value: any } } update
    */
   _update(update) {
     const { field, indexes, value } = update;
@@ -335,6 +341,8 @@ export class Form {
 
     set(errors, [field.id, ...Object.values(indexes || {})], fieldErrors.length ? fieldErrors : undefined);
 
+    this._emit('field.updated', update);
+
     this._setState({
       data: clone(data),
       errors: clone(errors),
@@ -364,7 +372,13 @@ export class Form {
    * @internal
    */
   _getModules() {
-    return [ExpressionLanguageModule, MarkdownRendererModule, ViewerCommandsModule, RepeatRenderModule];
+    return [
+      ExpressionLanguageModule,
+      ExpressionFieldModule,
+      MarkdownRendererModule,
+      ViewerCommandsModule,
+      RepeatRenderModule,
+    ];
   }
 
   /**

packages/form-js-viewer/src/features/expressionField/ExpressionLoopPreventer.js

@@ -0,0 +1,32 @@
+export class ExpressionLoopPreventer {
+  constructor(eventBus) {
+    this._computedExpressions = [];
+
+    eventBus.on('field.updated', ({ doNotRecompute }) => {
+      if (doNotRecompute) {
+        return;
+      }
+
+      this.reset();
+    });
+
+    eventBus.on('import.done', this.reset.bind(this));
+    eventBus.on('reset', this.reset.bind(this));
+  }
+
+  requestOnce(expression) {
+    if (this._computedExpressions.includes(expression)) {
+      return false;
+    }
+
+    this._computedExpressions.push(expression);
+
+    return true;
+  }
+
+  reset() {
+    this._computedExpressions = [];
+  }
+}
+
+ExpressionLoopPreventer.$inject = ['eventBus'];

packages/form-js-viewer/src/features/expressionField/index.js

@@ -0,0 +1,8 @@
+import { ExpressionLoopPreventer } from './ExpressionLoopPreventer';
+
+export const ExpressionFieldModule = {
+  __init__: ['expressionLoopPreventer'],
+  expressionLoopPreventer: ['type', ExpressionLoopPreventer],
+};
+
+export { ExpressionLoopPreventer };

packages/form-js-viewer/src/features/index.js

@@ -1,9 +1,11 @@
 export { ExpressionLanguageModule } from './expressionLanguage';
+export { ExpressionFieldModule } from './expressionField';
 export { MarkdownRendererModule } from './markdown';
 export { ViewerCommandsModule } from './viewerCommands';
 export { RepeatRenderModule } from './repeatRender';
 
 export * from './expressionLanguage';
+export * from './expressionField';
 export * from './markdown';
 export * from './viewerCommands';
 export * from './repeatRender';

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

@@ -13,17 +13,18 @@ export function ExpressionField(props) {
   const evaluation = useExpressionEvaluation(expression);
   const evaluationMemo = useDeepCompareMemoize(evaluation);
   const eventBus = useService('eventBus');
+  const expressionLoopPreventer = useService('expressionLoopPreventer');
 
   const sendValue = useCallback(() => {
-    onChange && onChange({ field, value: evaluationMemo });
+    onChange && onChange({ field, value: evaluationMemo, doNotRecompute: true });
   }, [field, evaluationMemo, onChange]);
 
   useEffect(() => {
-    if (computeOn !== 'change' || isEqual(evaluationMemo, value)) {
+    if (computeOn !== 'change' || isEqual(evaluationMemo, value) || !expressionLoopPreventer.requestOnce(this)) {
       return;
     }
     sendValue();
-  }, [computeOn, evaluationMemo, sendValue, value]);
+  });
 
   useEffect(() => {
     if (computeOn === 'presubmit') {

packages/form-js-viewer/test/spec/render/components/form-fields/ExpressionField.spec.js

@@ -43,7 +43,7 @@ describe('ExpressionField', function () {
     });
 
     // then
-    expect(onChangeSpy.calledWith({ field, value: 2 })).to.be.true;
+    expect(onChangeSpy.calledWith({ field, value: 2, doNotRecompute: true })).to.be.true;
   });
 
   it('should re-evaluate when the expression result changes', function () {
@@ -88,7 +88,7 @@ describe('ExpressionField', function () {
     });
 
     // then
-    expect(onChangeSpy.calledWith({ field, value: 3 })).to.be.true;
+    expect(onChangeSpy.calledWith({ field, value: 3, doNotRecompute: true })).to.be.true;
   });
 
   it('should not evaluate on intialization if computeOn presubmit', function () {
@@ -148,7 +148,7 @@ describe('ExpressionField', function () {
     });
 
     // then
-    expect(onChangeSpy.calledWith({ field, value: 2 })).to.be.true;
+    expect(onChangeSpy.calledWith({ field, value: 2, doNotRecompute: true })).to.be.true;
   });
 });