fix: properly pass this variable context to dynamic list elems

Closes #1085
bpmn-io · Mar 6, 2024 · 191584e · 191584e
1 parent bcedc83
commit 191584e
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 14 deletions.
diff --git a/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js b/packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js
@@ -79,11 +79,11 @@ export class RepeatRenderManager {
 
     return (
       <>
-        {displayValues.map((value, index) =>
+        {displayValues.map((itemValue, itemIndex) =>
           <RepetitionScaffold
-            key={ index }
-            index={ index }
-            value={ value }
+            key={ itemIndex }
+            itemIndex={ itemIndex }
+            itemValue={ itemValue }
             parentExpressionContextInfo={ parentExpressionContextInfo }
             repeaterField={ repeaterField }
             RowsRenderer={ RowsRenderer }
@@ -183,8 +183,8 @@ export class RepeatRenderManager {
  * Individual repetition of a repeated field and context scaffolding.
  *
  * @param {Object} props
- * @param {number} props.index
- * @param {Object} props.value
+ * @param {number} props.itemIndex
+ * @param {Object} props.itemValue
  * @param {Object} props.parentExpressionContextInfo
  * @param {Object} props.repeaterField
  * @param {Function} props.RowsRenderer
@@ -196,8 +196,8 @@ export class RepeatRenderManager {
 const RepetitionScaffold = (props) => {
 
   const {
-    index,
-    value,
+    itemIndex,
+    itemValue,
     parentExpressionContextInfo,
     repeaterField,
     RowsRenderer,
@@ -209,15 +209,15 @@ const RepetitionScaffold = (props) => {
 
   const elementProps = useMemo(() => ({
     ...restProps,
-    indexes: { ...(indexes || {}), [ repeaterField.id ]: index }
-  }), [ index, indexes, repeaterField.id, restProps ]);
+    indexes: { ...(indexes || {}), [ repeaterField.id ]: itemIndex }
+  }), [ itemIndex, indexes, repeaterField.id, restProps ]);
 
   const localExpressionContextInfo = useMemo(() => ({
     data: parentExpressionContextInfo.data,
-    this: value,
+    this: itemValue,
     parent: buildExpressionContext(parentExpressionContextInfo),
-    i: [ ...parentExpressionContextInfo.i , index + 1 ]
-  }), [ index, parentExpressionContextInfo, value ]);
+    i: [ ...parentExpressionContextInfo.i , itemIndex + 1 ]
+  }), [ itemIndex, parentExpressionContextInfo, itemValue ]);
 
   return !showRemove ?
     <LocalExpressionContext.Provider value={ localExpressionContextInfo }>
@@ -229,7 +229,7 @@ const RepetitionScaffold = (props) => {
           <RowsRenderer { ...elementProps } />
         </LocalExpressionContext.Provider>
       </div>
-      <button type="button" class="fjs-repeat-row-remove" aria-label={ `Remove list item ${index + 1}` } onClick={ () => onDeleteItem(index) }>
+      <button type="button" class="fjs-repeat-row-remove" aria-label={ `Remove list item ${itemIndex + 1}` } onClick={ () => onDeleteItem(itemIndex) }>
         <div class="fjs-repeat-row-remove-icon-container">
           <DeleteSvg />
         </div>

diff --git a/packages/form-js-viewer/test/spec/Form.spec.js b/packages/form-js-viewer/test/spec/Form.spec.js
@@ -17,6 +17,7 @@ import { CustomFormFieldsModule } from './custom';
 import conditionSchema from './condition.json';
 import conditionErrorsSchema from './condition-errors.json';
 import conditionErrorsDynamicListSchema from './condition-errors-dynamic-list.json';
+import dynamicListVariablesSchema from './dynamic-list-variables.json';
 import hiddenFieldsConditionalSchema from './hidden-fields-conditional.json';
 import hiddenFieldsExpressionSchema from './hidden-fields-expression.json';
 import disabledSchema from './disabled.json';
@@ -489,6 +490,41 @@ describe('Form', function() {
   });
 
 
+  it('should properly pass local context to dynamic list elements', async function() {
+
+    // given
+    const data = {
+      list: [
+        {
+          key: 1
+        },
+        {
+          key: 2
+        }
+      ]
+    };
+
+    // when
+    await bootstrapForm({
+      container,
+      data,
+      schema: dynamicListVariablesSchema
+    });
+
+    // then
+    expect(form).to.exist;
+
+    const repeatRowContainers = container.querySelectorAll('.fjs-repeat-row-container');
+    expect(repeatRowContainers).to.have.length(2);
+
+    repeatRowContainers.forEach((repeatRowContainer, index) => {
+      const textInput = repeatRowContainer.querySelector('.fjs-form-field-text p');
+      expect(textInput.textContent).to.eql(data.list[index].key.toString());
+    });
+
+  });
+
+
   const runFocusBlurTest = function(id, index, selector) {
 
     it('focus and blur events should trigger for ' + id, async function() {

diff --git a/packages/form-js-viewer/test/spec/dynamic-list-variables.json b/packages/form-js-viewer/test/spec/dynamic-list-variables.json
@@ -0,0 +1,43 @@
+{
+  "$schema": "../../../form-json-schema/resources/schema.json",
+  "schemaVersion": 15,
+  "id": "Form_0zdct1y",
+  "components": [
+    {
+      "components": [
+        {
+          "text": "{{this.key}}",
+          "type": "text",
+          "layout": {
+            "row": "Row_0ieso1a",
+            "columns": null
+          },
+          "id": "Field_0qywh6n"
+        },
+        {
+          "label": "Number",
+          "type": "number",
+          "layout": {
+            "row": "Row_0ieso1a",
+            "columns": null
+          },
+          "id": "Field_16p25os",
+          "key": "key"
+        }
+      ],
+      "showOutline": true,
+      "isRepeating": true,
+      "allowAddRemove": true,
+      "defaultRepetitions": 1,
+      "label": "Dynamic list",
+      "type": "dynamiclist",
+      "layout": {
+        "row": "Row_18s5yz0",
+        "columns": null
+      },
+      "id": "Field_1dji6mu",
+      "path": "list"
+    }
+  ],
+  "type": "default"
+}