fix: dynamic list collapsing issue

packages/form-js-viewer/assets/form-js-base.css

@@ -1189,6 +1189,10 @@
   color: var(--color-warning);
 }
 
+.fjs-container .fjs-repeat-row-collapsed {
+  display: none;
+}
+
 .fjs-container .fjs-repeat-render-footer {
   display: flex;
   flex-direction: row;

packages/form-js-viewer/src/features/repeatRender/RepeatRenderManager.js

@@ -59,6 +59,7 @@ export class RepeatRenderManager {
     const showRemove = repeaterField.allowAddRemove && hasChildren;
 
     const displayValues = isCollapsed ? values.slice(0, nonCollapsedItems) : values;
+    const hiddenValues = isCollapsed ? values.slice(nonCollapsedItems) : [];
 
     const onDeleteItem = (index) => {
       const updatedValues = values.slice();
@@ -89,6 +90,24 @@ export class RepeatRenderManager {
             {...restProps}
           />
         ))}
+        {hiddenValues.length > 0 ? (
+          <div className="fjs-repeat-row-collapsed">
+            {hiddenValues.map((itemValue, itemIndex) => (
+              <RepetitionScaffold
+                key={itemIndex}
+                itemIndex={itemIndex + nonCollapsedItems}
+                itemValue={itemValue}
+                parentExpressionContextInfo={parentExpressionContextInfo}
+                repeaterField={repeaterField}
+                RowsRenderer={RowsRenderer}
+                indexes={indexes}
+                onDeleteItem={onDeleteItem}
+                showRemove={showRemove}
+                {...restProps}
+              />
+            ))}
+          </div>
+        ) : null}
       </>
     );
   }

packages/form-js-viewer/test/spec/Form.spec.js

@@ -6,6 +6,8 @@ import { spy } from 'sinon';
 
 import { CustomFormFieldsModule } from './custom';
 
+import { range } from 'lodash';
+
 import conditionSchema from './condition.json';
 import conditionErrorsSchema from './condition-errors.json';
 import conditionErrorsDynamicListSchema from './condition-errors-dynamic-list.json';
@@ -507,6 +509,37 @@ describe('Form', function () {
     });
   });
 
+  it('should submit collapsed values', async function () {
+    // given
+    const data = {
+      list: range(1, 11).map((key) => ({ key })),
+    };
+
+    // when
+    await bootstrapForm({
+      container,
+      data,
+      schema: dynamicListVariablesSchema,
+    });
+
+    expect(form).to.exist;
+
+    const repeatRowContainers = container.querySelectorAll('.fjs-repeat-row-container');
+    expect(repeatRowContainers).to.have.length(10);
+
+    // then
+    expect(form.submit().data.list).to.have.length(10);
+
+    // but when
+    const collapseButton = container.querySelector('.fjs-repeat-render-collapse');
+    expect(collapseButton).to.exist;
+
+    fireEvent.click(collapseButton);
+
+    // then
+    expect(form.submit().data.list).to.have.length(10);
+  });
+
   it('should hold proper interaction between table and dynamic list', async function () {
     // given
     const data = {