Add multiple elements to FieldArray in one function call via arrayHelper.

[pierreTklein]

🚀 Feature request

Current Behavior

There is no functionality for adding many elements to a FieldArray. When adding over a ~20 elements via arrayHelper in a for-loop, there is considerable lag, and the UI freezes.

const items = getItemsViaSomeFunction();
items.forEach((item) => {
    arrayHelpers.push(item);
});

Desired Behavior

We should be able to add many elements in one go, so that there is only one DOM update.

Suggested Solution

Add a function to ArrayHelpers that is similar to .push:

  pushMultiple = (values: any[]) =>
    this.updateArrayField(
      (array: any[]) => (array || []).concat(cloneDeep(values)),
      false,
      false
    );

Who does this impact? Who is this for?

This would be for all users.

Describe alternatives you've considered

The alternative would be to repeatedly use arrayHelpers in a for loop, but this is laggy when the number of elements being added is higher than 10 or 20.

[mac89]

I'm encountering this issue. I worked around by setting validateOnChange to false while I'm pushing and manually calling validateForm afterwards.

An alternate solution might be to add a parameter to the push method to disable validation.

[ghost]

Any changes? I need to push more than 1000 items and only way to do it now if loop throw each item and push it via arrayHelper but it's freeze my UI for a minute.