diff --git a/frontend/packages/shared/src/components/InputActionWrapper/InputActionWrapper.test.tsx b/frontend/packages/shared/src/components/InputActionWrapper/InputActionWrapper.test.tsx index 036c039633d..87bf2d76734 100644 --- a/frontend/packages/shared/src/components/InputActionWrapper/InputActionWrapper.test.tsx +++ b/frontend/packages/shared/src/components/InputActionWrapper/InputActionWrapper.test.tsx @@ -92,4 +92,14 @@ describe('InputActionWrapper', () => { await act(() => user.hover(input)); expect(screen.getByLabelText('general.edit')).toBeInTheDocument(); }); + + it('renders right actions when switching mode', async () => { + const { rerender } = await rtlRender(); + expect(screen.getByLabelText('general.save')).toBeInTheDocument(); + expect(screen.getByLabelText('general.delete')).toBeInTheDocument(); + + rerender(); + expect(screen.getByLabelText('general.edit')).toBeInTheDocument(); + expect(screen.getByLabelText('general.delete')).toBeInTheDocument(); + }); }); diff --git a/frontend/packages/shared/src/components/InputActionWrapper/InputActionWrapper.tsx b/frontend/packages/shared/src/components/InputActionWrapper/InputActionWrapper.tsx index c9d1a1361a4..f3f21a9d755 100644 --- a/frontend/packages/shared/src/components/InputActionWrapper/InputActionWrapper.tsx +++ b/frontend/packages/shared/src/components/InputActionWrapper/InputActionWrapper.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { CheckmarkIcon, TrashIcon, PencilWritingIcon } from '@altinn/icons'; import { useText } from '../../../../ux-editor/src/hooks/index'; import { Button, ButtonProps } from '@digdir/design-system-react'; @@ -36,7 +36,12 @@ export const InputActionWrapper = ({ ...rest }: InputActionWrapperProps): JSX.Element => { const t = useText(); - const [actions, setActions] = useState(actionGroupMap[mode || 'standBy']); + const defaultActions = actionGroupMap[mode || 'standBy']; + const [actions, setActions] = useState(defaultActions); + + useEffect(() => { + setActions(defaultActions); + }, [defaultActions]); const handleFocus = (): void => { setActions(actionGroupMap['editMode']); diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBindings.test.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBindings.test.tsx index 735531ff795..80fcf3df40c 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBindings.test.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBindings.test.tsx @@ -62,7 +62,7 @@ const render = async ({ }, }; - renderWithMockStore( + return renderWithMockStore( { appData }, { getDatamodelMetadata }, handleDataModelChange(), @@ -273,4 +273,23 @@ describe('EditDataModelBindings', () => { expect(editIcon).toBeInTheDocument(); expect(onEditClick).toHaveBeenCalled; }); + + it('show right data model when switching component', async () => { + const { renderResult } = await render({ + dataModelBindings: { simpleBinding: 'testModel.field1' }, + }); + expect(await screen.findByText('testModel.field1')).toBeInTheDocument(); + renderResult.rerender( + , + ); + expect(await screen.findByText('testModel.field2')).toBeInTheDocument(); + }); }); diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBindings.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBindings.tsx index 8ac794bf594..b57711aeb00 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBindings.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBindings.tsx @@ -1,7 +1,7 @@ import type { IGenericEditComponent } from '../componentConfig'; import { getMinOccursFromDataModel, getXsdDataTypeFromDataModel } from '../../../utils/datamodel'; import { ComponentType } from 'app-shared/types/ComponentType'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { useText } from '../../../hooks'; import { SelectDataModelComponent } from '../SelectDataModelComponent'; import { useDatamodelMetadataQuery } from '../../../hooks/queries/useDatamodelMetadataQuery'; @@ -49,9 +49,14 @@ export const EditDataModelBindings = ({ const { uniqueKey, key, label } = renderOptions || {}; const [dataModelSelectVisible, setDataModelSelectVisible] = useState(false); - const [selectedOption, setSelectedOption] = useState( - component.dataModelBindings ? component.dataModelBindings[key || 'simpleBinding'] : undefined, - ); + + useEffect(() => { + setDataModelSelectVisible(false); + }, [component.id]); + + const selectedOption = component.dataModelBindings + ? component.dataModelBindings[key || 'simpleBinding'] + : undefined; return (
@@ -69,7 +74,6 @@ export const EditDataModelBindings = ({ onDeleteClick={() => { handleDataModelChange('', key); setDataModelSelectVisible(false); - setSelectedOption(undefined); }} onSaveClick={() => setDataModelSelectVisible(false)} > @@ -95,7 +99,6 @@ export const EditDataModelBindings = ({ } onDataModelChange={(dataModelField: string) => { handleDataModelChange(dataModelField, key); - setSelectedOption(dataModelField); }} noOptionsMessage={t('general.no_options')} helpText={helpText} diff --git a/frontend/packages/ux-editor/src/testing/mocks.tsx b/frontend/packages/ux-editor/src/testing/mocks.tsx index ad4accac9d8..b726adf0456 100644 --- a/frontend/packages/ux-editor/src/testing/mocks.tsx +++ b/frontend/packages/ux-editor/src/testing/mocks.tsx @@ -125,7 +125,9 @@ export const renderWithMockStore = storeCreator, }); const renderResult = render(renderComponent(component)); - return { renderResult, store }; + const rerender = (rerenderedComponent) => + renderResult.rerender(renderComponent(rerenderedComponent)); + return { renderResult: { ...renderResult, rerender }, store }; }; export const renderHookWithMockStore =