Fixed openByDefault to use filter (#571)

* Fixed openByDefault to use filter

* Preserve backward compatibility

src/altinn-app-frontend/src/features/form/containers/GroupContainer.tsx

@@ -11,7 +11,10 @@ import { RepeatingGroupTable } from 'src/features/form/containers/RepeatingGroup
 import { FormLayoutActions } from 'src/features/form/layout/formLayoutSlice';
 import { makeGetHidden } from 'src/selectors/getLayoutData';
 import { Triggers } from 'src/types';
-import { createRepeatingGroupComponents } from 'src/utils/formLayout';
+import {
+  createRepeatingGroupComponents,
+  getRepeatingGroupFilteredIndices,
+} from 'src/utils/formLayout';
 import { getHiddenFieldsForGroup } from 'src/utils/layout';
 import { renderValidationMessagesForComponent } from 'src/utils/render';
 import { repeatingGroupHasValidations } from 'src/utils/validation';
@@ -152,24 +155,12 @@ export function GroupContainer({
   );
 
   React.useEffect(() => {
-    if (container.edit?.filter && container.edit.filter.length > 0) {
-      container.edit.filter.forEach((rule) => {
-        const formDataKeys: string[] = Object.keys(formData).filter((key) => {
-          const keyWithoutIndex = key.replaceAll(/\[\d*\]/g, '');
-          return keyWithoutIndex === rule.key && formData[key] === rule.value;
-        });
-        if (formDataKeys && formDataKeys.length > 0) {
-          const filtered = formDataKeys.map((key) => {
-            const match = key.match(/\[(\d*)\]/g);
-            const currentIndex = match[match.length - 1];
-            return parseInt(
-              currentIndex.substring(1, currentIndex.indexOf(']')),
-              10,
-            );
-          });
-          setFilteredIndexList(filtered);
-        }
-      });
+    const filteredIndexList = getRepeatingGroupFilteredIndices(
+      formData,
+      container.edit?.filter,
+    );
+    if (filteredIndexList) {
+      setFilteredIndexList(filteredIndexList);
     }
   }, [formData, container]);
 

src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.ts

@@ -38,6 +38,7 @@ import {
 } from 'src/utils/databindings';
 import {
   findChildren,
+  getRepeatingGroupFilteredIndices,
   getRepeatingGroups,
   mapFileUploadersWithTag,
   removeRepeatingGroupFromUIConfig,
@@ -675,12 +676,18 @@ export function* initRepeatingGroupsSaga(): SagaIterator {
     const container = groupContainers.find(
       (element) => element.id === key,
     ) as ILayoutGroup;
-
     if (container && group.index >= 0) {
+      const filteredIndexList = getRepeatingGroupFilteredIndices(
+        formDataState.formData,
+        container.edit?.filter,
+      );
+
       if (container.edit?.openByDefault === 'first') {
-        group.editIndex = 0;
+        group.editIndex = filteredIndexList ? filteredIndexList[0] : 0;
       } else if (container.edit?.openByDefault === 'last') {
-        group.editIndex = group.index;
+        group.editIndex = filteredIndexList
+          ? filteredIndexList.at(-1)
+          : group.index;
       }
     }
   });

src/altinn-app-frontend/src/utils/formLayout.ts

@@ -1,7 +1,9 @@
 import { INDEX_KEY_INDICATOR_REGEX } from 'src/utils/databindings';
+import type { IFormData } from 'src/features/form/data';
 import type {
   ComponentTypes,
   IGroupEditProperties,
+  IGroupFilter,
   ILayout,
   ILayoutComponent,
   ILayoutGroup,
@@ -555,3 +557,35 @@ export function behavesLikeDataTask(
 ): boolean {
   return layoutSets?.sets.some((set) => set.tasks?.includes(task));
 }
+
+/**
+ * (Deprecate this function) Returns the filtered indices of a repeating group.
+ * This is a buggy implementation, but is used for backward compatibility until a new major version is released.
+ * @see https://github.com/Altinn/app-frontend-react/issues/339#issuecomment-1286624933
+ * @param formData IFormData
+ * @param filter IGroupEditProperties.filter or undefined.
+ * @returns a list of indices for repeating group elements after applying filters, or null if no filters are provided or if no elements match.
+ */
+export function getRepeatingGroupFilteredIndices(
+  formData: IFormData,
+  filter?: IGroupFilter[],
+): number[] | null {
+  if (filter && filter.length > 0) {
+    const rule = filter.at(-1);
+    const formDataKeys: string[] = Object.keys(formData).filter((key) => {
+      const keyWithoutIndex = key.replaceAll(/\[\d*\]/g, '');
+      return keyWithoutIndex === rule.key && formData[key] === rule.value;
+    });
+    if (formDataKeys && formDataKeys.length > 0) {
+      return formDataKeys.map((key) => {
+        const match = key.match(/\[(\d*)\]/g);
+        const currentIndex = match[match.length - 1];
+        return parseInt(
+          currentIndex.substring(1, currentIndex.indexOf(']')),
+          10,
+        );
+      });
+    }
+  }
+  return null;
+}