Add unique key to Action component

src/openforms/js/components/admin/form_design/FormLogic.stories.js

@@ -1,4 +1,4 @@
-import {fn} from '@storybook/test';
+import {expect, fn, userEvent, within} from '@storybook/test';
 
 import {
   FeatureFlagsDecorator,
@@ -209,3 +209,74 @@ export const FullFunctionality = {
     availableFormSteps: AVAILABLE_FORM_STEPS,
   },
 };
+
+export const DeletingOneOfMultipleActionsInSameTrigger = {
+  name: 'Deleting one of multiple actions in the same trigger',
+
+  args: {
+    logicRules: [
+      {
+        uuid: 'foo',
+        _generatedId: 'foo', // consumers should generate this, as it's used for the React key prop if no uuid exists
+        _logicType: 'simple',
+        form: 'http://localhost:8000/api/v2/forms/ae26e20c-f059-4fdf-bb82-afc377869bb5',
+        description: 'Sample rule',
+        _mayGenerateDescription: false,
+        order: 1,
+
+        jsonLogicTrigger: {
+          '==': [
+            {
+              var: 'foo',
+            },
+            'bar',
+          ],
+        },
+
+        isAdvanced: false,
+
+        actions: [
+          {
+            component: '',
+            variable: 'foo',
+            formStepUuid: null,
+            action: {
+              type: 'variable',
+              value: 'First action',
+            },
+          },
+          {
+            component: '',
+            variable: 'bar',
+            formStepUuid: null,
+            action: {
+              type: 'variable',
+              value: 'Second action',
+            },
+          },
+        ],
+      },
+    ],
+
+    availableFormVariables: AVAILABLE_FORM_VARIABLES,
+    availableFormSteps: AVAILABLE_FORM_STEPS,
+  },
+
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    // Both actions should be present
+    expect(await canvas.findByText(/First action/)).toBeInTheDocument();
+    expect(await canvas.findByText(/Second action/)).toBeInTheDocument();
+
+    // Delete the first action (the first array entry is the delete icon for the entire rule)
+    const deleteIcons = await canvas.findAllByTitle('Verwijderen');
+    expect(deleteIcons).toHaveLength(3);
+    await userEvent.click(deleteIcons[1]);
+    await userEvent.click(await canvas.findByRole('button', {name: 'Accepteren'}));
+
+    // First action should be removed, and the second should still be present
+    expect(canvas.queryByText(/First action/)).not.toBeInTheDocument();
+    expect(await canvas.findByText(/Second action/)).toBeInTheDocument();
+  },
+};

src/openforms/js/components/admin/form_design/logic/actions/ActionSet.js

@@ -6,6 +6,7 @@ import {useImmerReducer} from 'use-immer';
 
 import ButtonContainer from 'components/admin/forms/ButtonContainer';
 import useOnChanged from 'hooks/useOnChanged';
+import {getUniqueRandomString} from 'utils/random';
 
 import Action from './Action';
 import {ActionError} from './types';
@@ -94,7 +95,7 @@ const ActionSet = ({name, actions, errors = [], onChange}) => {
     <>
       {state.actions.map((action, index) => (
         <Action
-          key={index}
+          key={getUniqueRandomString()}
           prefixText={index === 0 ? firstActionPrefix : extraActionPrefix}
           action={action}
           errors={errors[index] || {}}