diff --git a/src/altinn-app-frontend/src/features/form/containers/GroupContainer.tsx b/src/altinn-app-frontend/src/features/form/containers/GroupContainer.tsx index a40128720e..5baf74c7e2 100644 --- a/src/altinn-app-frontend/src/features/form/containers/GroupContainer.tsx +++ b/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]); diff --git a/src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.ts b/src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.ts index 659348664b..2864d55a3f 100644 --- a/src/altinn-app-frontend/src/features/form/layout/update/updateFormLayoutSagas.ts +++ b/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; } } }); diff --git a/src/altinn-app-frontend/src/utils/formLayout.ts b/src/altinn-app-frontend/src/utils/formLayout.ts index 30c7c7a9d4..b24bf98548 100644 --- a/src/altinn-app-frontend/src/utils/formLayout.ts +++ b/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; +}