@ukhomeoffice/cop-react-form-renderer 5.74.3 → 5.74.5

package/dist/components/CollectionSummary/CollectionSummary.js

@@ -76,6 +76,15 @@ var CollectionSummary = function CollectionSummary(_ref) {
   var data = (0, _react.useMemo)(function () {
     return _utils.default.CollectionPage.getData(config.collectionName, formData) || [];
   }, [formData]);
+  var toFocusOn = Array.isArray(data) && data.length > 0 ? data.reduce(function (acc, current) {
+    if (current.isDuplicate) {
+      if (!acc || current.id > acc.id) {
+        return current;
+      }
+      return acc;
+    }
+    return acc;
+  }, null) : null;
   var masterPage = (0, _react.useMemo)(function () {
     var collectionNameParts = config.collectionName.split('.');
     var childPages = _utils.default.CollectionPage.mergePages(pages || []) || [];
@@ -247,7 +256,9 @@ var CollectionSummary = function CollectionSummary(_ref) {
     var isInError = errors.filter(function (e) {
       return e.entryId === entry.id;
     }).length > 0;
-    var finalConfig = _objectSpread(_objectSpread(_objectSpread({}, config.card), entry.isDuplicate && config.duplicatedCard ? config.duplicatedCard : {}), isInError && config.errorCard ? config.errorCard : {});
+    var finalConfig = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, config.card), entry.isDuplicate && config.duplicatedCard ? config.duplicatedCard : {}), isInError && config.errorCard ? config.errorCard : {}), {}, {
+      focusOn: (toFocusOn === null || toFocusOn === void 0 ? void 0 : toFocusOn.id) === entry.id
+    });
     var key = "".concat(config.fieldId, ".summaryCard").concat(entry.id);
     return /*#__PURE__*/_react.default.createElement(_SummaryCardValidationContext.default, {
       entryId: entry.id,

package/dist/components/CollectionSummary/CollectionSummary.test.js

@@ -73,6 +73,52 @@ describe('components.CollectionSummary.CollectionSummary', function () {
     expect(summary.children[0].id).toEqual("".concat(CONFIG.fieldId, ".summaryCard").concat(FORM_DATA.testCollection[0].id));
     expect(summary.children[1].id).toEqual("".concat(CONFIG.fieldId, ".summaryCard").concat(FORM_DATA.testCollection[1].id));
   });
+  it('should focus on the most recently duplicated item', function () {
+    var customConfig = {
+      id: 'testSummary',
+      fieldId: 'testSummary',
+      collectionName: 'testCollection',
+      card: {
+        title: 'Title',
+        deleteAction: {
+          label: 'Delete'
+        },
+        changeAction: {
+          label: 'Change label',
+          page: 'testPage',
+          aria_label: [{
+            text: 'testText'
+          }]
+        }
+      },
+      quickEdit: true,
+      focusOn: true
+    };
+    var customFormData = {
+      testCollectionActiveId: '001',
+      testCollection: [{
+        id: '000',
+        testText: 'value',
+        isDuplicate: true
+      }, {
+        id: '001',
+        isDuplicate: true
+      }]
+    };
+    var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+        config: customConfig,
+        formData: customFormData,
+        onAction: ON_ACTION
+      })),
+      container = _renderWithValidation2.container;
+    var changeButtons = container.querySelectorAll('[data-testid="change-button"]');
+    var firstDuplicatedItem = changeButtons[0];
+    var lastDuplicatedItem = changeButtons[changeButtons.length - 1];
+    expect(lastDuplicatedItem).toBeDefined();
+    expect(document.activeElement).toEqual(lastDuplicatedItem);
+    expect(lastDuplicatedItem.id).toEqual('testSummary.summaryCard001.changeButton');
+    expect(document.activeElement).not.toEqual(firstDuplicatedItem);
+  });
   it('should correctly queue errors found when validating entries', function () {
     var ErrorCheckComponent = function ErrorCheckComponent() {
       var _useValidation = (0, _hooks.useValidation)(),
@@ -81,24 +127,24 @@ describe('components.CollectionSummary.CollectionSummary', function () {
         return e.error;
       }));
     };
-    var _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ErrorCheckComponent, null), /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+    var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ErrorCheckComponent, null), /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
         config: CONFIG,
         formData: FORM_DATA,
         onAction: ON_ACTION,
         pages: PAGES
       }))),
-      container = _renderWithValidation2.container;
+      container = _renderWithValidation3.container;
     var errorChecker = container.children[0];
     expect(errorChecker.textContent).toContain('queuedErrors is an array of length 1');
     expect(errorChecker.textContent).toContain('testText is required');
   });
   it('should render a confirmation when a SummaryCard\'s delete button is pressed', function () {
-    var _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+    var _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
         config: CONFIG,
         formData: FORM_DATA,
         onAction: ON_ACTION
       })),
-      container = _renderWithValidation3.container;
+      container = _renderWithValidation4.container;
     var summary = checkSetup(container);
     expect(summary.children.length).toEqual(2);
     var card = summary.children[0];
@@ -122,12 +168,12 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           title: 'Title'
         }
       };
-      var _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+      var _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
           config: CONFIG_WITH_BUTTON,
           formData: FORM_DATA,
           onAction: ON_ACTION
         })),
-        container = _renderWithValidation4.container;
+        container = _renderWithValidation5.container;
       var summary = checkSetup(container);
       expect(summary.children.length).toEqual(3); // The button and a card for each item.
       expect(summary.children[0].id).toEqual("".concat(CONFIG_WITH_BUTTON.fieldId, ".addButton"));
@@ -146,12 +192,12 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           title: 'Title'
         }
       };
-      var _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+      var _renderWithValidation6 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
           config: CONFIG_WITH_BUTTON,
           formData: FORM_DATA,
           onAction: ON_ACTION
         })),
-        container = _renderWithValidation5.container;
+        container = _renderWithValidation6.container;
       var summary = checkSetup(container);
       expect(summary.children.length).toEqual(3); // The button and a card for each item.
       expect(summary.children[0].id).toEqual("".concat(CONFIG_WITH_BUTTON.fieldId, ".addButton"));
@@ -159,12 +205,12 @@ describe('components.CollectionSummary.CollectionSummary', function () {
       expect(summary.children[0].tagName).toEqual('BUTTON');
     });
     it('should apply the expected class name to the summary card when delete button is pressed', function () {
-      var _renderWithValidation6 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+      var _renderWithValidation7 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
           config: CONFIG,
           formData: FORM_DATA,
           onAction: ON_ACTION
         })),
-        container = _renderWithValidation6.container;
+        container = _renderWithValidation7.container;
       var summary = checkSetup(container);
       expect(summary.children.length).toEqual(2);
       var card = summary.children[0];
@@ -175,12 +221,12 @@ describe('components.CollectionSummary.CollectionSummary', function () {
       expect(card.className).toContain('deleting-summary-card');
     });
     it('should focus on the delete button in the confirmation panel', function () {
-      var _renderWithValidation7 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+      var _renderWithValidation8 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
           config: CONFIG,
           formData: FORM_DATA,
           onAction: ON_ACTION
         })),
-        container = _renderWithValidation7.container;
+        container = _renderWithValidation8.container;
       var summary = checkSetup(container);
       expect(summary.children.length).toEqual(2);
       var card = summary.children[0];
@@ -191,12 +237,12 @@ describe('components.CollectionSummary.CollectionSummary', function () {
       expect(document.activeElement).toEqual(confirmButton);
     });
     it('should have the role "alert" in the confirmation panel', function () {
-      var _renderWithValidation8 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+      var _renderWithValidation9 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
           config: CONFIG,
           formData: FORM_DATA,
           onAction: ON_ACTION
         })),
-        container = _renderWithValidation8.container;
+        container = _renderWithValidation9.container;
       var summary = checkSetup(container);
       expect(summary.children.length).toEqual(2);
       var card = summary.children[0];
@@ -216,14 +262,14 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           displayFields: ['testText']
         }
       });
-      var _renderWithValidation9 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+      var _renderWithValidation10 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
           config: listViewConfig,
           formData: FORM_DATA,
           onAction: ON_ACTION,
           pages: PAGES
         })),
-        container = _renderWithValidation9.container,
-        getByText = _renderWithValidation9.getByText;
+        container = _renderWithValidation10.container,
+        getByText = _renderWithValidation10.getByText;
       var summary = checkSetup(container);
       expect(summary.children.length).toEqual(2);
       var card = summary.children[0];
@@ -248,14 +294,14 @@ describe('components.CollectionSummary.CollectionSummary', function () {
           message: 'Test confirmation message with index number ${index}'
         }
       });
-      var _renderWithValidation10 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
+      var _renderWithValidation11 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_CollectionSummary.default, {
           config: listViewConfig,
           formData: FORM_DATA,
           onAction: ON_ACTION,
           pages: PAGES
         })),
-        container = _renderWithValidation10.container,
-        getByText = _renderWithValidation10.getByText;
+        container = _renderWithValidation11.container,
+        getByText = _renderWithValidation11.getByText;
       var summary = checkSetup(container);
       expect(summary.children.length).toEqual(2);
       var card = summary.children[0];

package/dist/components/CollectionSummary/SummaryCard.js

@@ -178,6 +178,7 @@ var SummaryCard = function SummaryCard(_ref) {
   }, _utils.default.FormPage.getConditionalText(config.details, entryData))), /*#__PURE__*/_react.default.createElement("div", {
     className: classes('header-actions')
   }, config.quickEdit && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+    "data-testid": "quickedit-button",
     id: "".concat(id, ".quickEditButton"),
     onClick: function onClick() {
       return setQuickEdit(function (prevState) {
@@ -187,9 +188,10 @@ var SummaryCard = function SummaryCard(_ref) {
     classModifiers: "primary",
     disabled: quickEdit,
     name: "QuickEdit",
-    autoFocus: entryData.isDuplicate
+    autoFocus: config.focusOn
   }, DEFAULT_EDIT_LABEL), config.changeAction && typeof onFullEdit === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
     id: "".concat(id, ".changeButton"),
+    "data-testid": "change-button",
     onClick: function onClick() {
       var _config$changeAction;
       return onFullEdit((_config$changeAction = config.changeAction) === null || _config$changeAction === void 0 ? void 0 : _config$changeAction.page, entryData.id);
@@ -197,7 +199,7 @@ var SummaryCard = function SummaryCard(_ref) {
     classModifiers: ((_config$changeAction2 = config.changeAction) === null || _config$changeAction2 === void 0 ? void 0 : _config$changeAction2.classModifiers) || DEFAULT_CHANGE_BUTTON_CLASS,
     "aria-label": _utils.default.FormPage.getConditionalText((_config$changeAction3 = config.changeAction) === null || _config$changeAction3 === void 0 ? void 0 : _config$changeAction3.aria_label, entryData),
     name: "Change",
-    autoFocus: entryData.isDuplicate
+    autoFocus: config.focusOn
   }, ((_config$changeAction4 = config.changeAction) === null || _config$changeAction4 === void 0 ? void 0 : _config$changeAction4.label) || DEFAULT_CHANGE_BUTTON_LABEL), config.deleteAction && typeof onDelete === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
     id: "".concat(id, ".deleteButton"),
     onClick: function onClick() {
@@ -205,9 +207,9 @@ var SummaryCard = function SummaryCard(_ref) {
     },
     classModifiers: "secondary",
     "aria-label": _utils.default.FormPage.getConditionalText((_config$deleteAction = config.deleteAction) === null || _config$deleteAction === void 0 ? void 0 : _config$deleteAction.aria_label, entryData),
-    name: "Delete",
-    autoFocus: entryData.isDuplicate
+    name: "Delete"
   }, ((_config$deleteAction2 = config.deleteAction) === null || _config$deleteAction2 === void 0 ? void 0 : _config$deleteAction2.label) || DEFAULT_DELETE_BUTTON_LABEL), config.duplicateAction && typeof onDuplicate === 'function' && /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+    "data-testid": "duplicate-button",
     id: "".concat(id, ".duplicateButton"),
     onClick: function onClick() {
       onDuplicate(entryData);
@@ -215,7 +217,7 @@ var SummaryCard = function SummaryCard(_ref) {
     classModifiers: "secondary",
     "aria-label": _utils.default.FormPage.getConditionalText((_config$duplicateActi = config.duplicateAction) === null || _config$duplicateActi === void 0 ? void 0 : _config$duplicateActi.aria_label, entryData),
     name: "Duplicate",
-    autoFocus: entryData.isDuplicate
+    autoFocus: config.focusOn
   }, ((_config$duplicateActi2 = config.duplicateAction) === null || _config$duplicateActi2 === void 0 ? void 0 : _config$duplicateActi2.label) || DEFAULT_DUPLICATE_BUTTON_LABEL))), quickEdit && quickEditPage && /*#__PURE__*/_react.default.createElement(_FormPage.default, {
     page: quickEditPage,
     onAction: function onAction(action, patch) {
@@ -238,8 +240,7 @@ SummaryCard.propTypes = {
   id: _propTypes.default.string.isRequired,
   entryData: _propTypes.default.shape({
     id: _propTypes.default.string.isRequired,
-    index: _propTypes.default.number.isRequired,
-    isDuplicate: _propTypes.default.bool
+    index: _propTypes.default.number.isRequired
   }).isRequired,
   config: _propTypes.default.shape({
     className: _propTypes.default.string,
@@ -266,7 +267,8 @@ SummaryCard.propTypes = {
       }))
     }),
     detailsTitle: _propTypes.default.string,
-    listView: _propTypes.default.bool
+    listView: _propTypes.default.bool,
+    focusOn: _propTypes.default.bool
   }).isRequired,
   masterPage: _propTypes.default.shape({
     childPages: _propTypes.default.arrayOf(_propTypes.default.shape({

package/dist/components/CollectionSummary/SummaryCard.test.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _react = require("@testing-library/react");
+require("@testing-library/jest-dom/extend-expect");
 var _react2 = _interopRequireDefault(require("react"));
 var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 var _testUtils = require("react-dom/test-utils");
@@ -582,6 +583,62 @@ describe('components.CollectionSummary.SummaryCard', function () {
         headerActionDiv = _checkSetup18.headerActionDiv;
       expect(headerActionDiv.children.length).toEqual(0);
     });
+    it('should focus on the most recently duplicated item', function () {
+      var entryData = {
+        id: ID,
+        isDuplicate: true
+      };
+      var config = {
+        duplicateAction: {
+          label: 'Duplicate Label',
+          aria_label: 'Duplicate Aria Label'
+        }
+      };
+      var onDuplicate = jest.fn();
+      var _renderWithValidation20 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+          id: ID,
+          entryData: entryData,
+          config: config,
+          onDuplicate: onDuplicate,
+          parentCollectionName: "parent",
+          pages: [],
+          formData: {},
+          hideDetails: true,
+          masterPage: {
+            childPages: []
+          }
+        })),
+        getByTestId = _renderWithValidation20.getByTestId;
+      var updatedConfig = {
+        focusOn: true,
+        quickEdit: true
+      };
+
+      // Rerender the component with updated config
+      var _renderWithValidation21 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+          id: ID,
+          entryData: entryData,
+          config: updatedConfig,
+          parentCollectionName: "parent",
+          pages: [],
+          formData: {},
+          hideDetails: true,
+          masterPage: {
+            childPages: []
+          }
+        })),
+        getByTestIdRerender = _renderWithValidation21.getByTestId;
+
+      // check that focus isn't on the initial component
+      var initialComponent = getByTestId('duplicate-button');
+      expect(initialComponent).toBeInTheDocument();
+      expect(initialComponent).not.toHaveFocus();
+
+      // check that the focus is on the newly duplicated component
+      var DuplicatedComponent = getByTestIdRerender('quickedit-button');
+      expect(DuplicatedComponent).toBeInTheDocument();
+      expect(DuplicatedComponent).toHaveFocus();
+    });
   });
   describe('Quick Edit action button', function () {
     var CONFIG = {
@@ -611,7 +668,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       }
     }];
     it('should render correctly', function () {
-      var _renderWithValidation20 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation22 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -621,7 +678,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: PAGES
           }
         })),
-        container = _renderWithValidation20.container;
+        container = _renderWithValidation22.container;
       var _checkSetup19 = checkSetup(container),
         headerActionDiv = _checkSetup19.headerActionDiv;
       expect(headerActionDiv.children.length).toEqual(1);
@@ -652,7 +709,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
     });
 
     it('should not render when no config is provided for it', function () {
-      var _renderWithValidation21 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation23 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: {},
@@ -662,7 +719,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: PAGES
           }
         })),
-        container = _renderWithValidation21.container;
+        container = _renderWithValidation23.container;
       var _checkSetup20 = checkSetup(container),
         headerActionDiv = _checkSetup20.headerActionDiv;
       expect(headerActionDiv.children.length).toEqual(0);
@@ -707,7 +764,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
         entryId: '123',
         error: 'top-level error message'
       }];
-      var _renderWithValidation22 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
+      var _renderWithValidation24 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
           entryId: CUSTOM_ENTRY.id,
           topLevelErrors: TOP_LEVEL_ERRORS
         }, /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
@@ -720,7 +777,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: PAGES
           }
         }))),
-        container = _renderWithValidation22.container;
+        container = _renderWithValidation24.container;
       var _checkSetup21 = checkSetup(container),
         headerActionDiv = _checkSetup21.headerActionDiv;
       expect(headerActionDiv.children.length).toEqual(1);
@@ -742,7 +799,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       expect(errorSummary.textContent).toContain(TOP_LEVEL_ERRORS[0].error);
     });
     it('should only show errors from validation when it happens, ignoring top-level errors', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-      var TOP_LEVEL_ERRORS, _renderWithValidation23, container, _checkSetup22, headerActionDiv, editButton, quickEdit, errorSummary, component, componentInput, quickEditButtons, saveButton;
+      var TOP_LEVEL_ERRORS, _renderWithValidation25, container, _checkSetup22, headerActionDiv, editButton, quickEdit, errorSummary, component, componentInput, quickEditButtons, saveButton;
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
@@ -751,7 +808,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               entryId: '123',
               error: 'top-level error message'
             }];
-            _renderWithValidation23 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
+            _renderWithValidation25 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
               entryId: CUSTOM_ENTRY.id,
               topLevelErrors: TOP_LEVEL_ERRORS
             }, /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
@@ -764,7 +821,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
                 childPages: PAGES
               },
               onQuickEdit: function onQuickEdit() {}
-            }))), container = _renderWithValidation23.container;
+            }))), container = _renderWithValidation25.container;
             _checkSetup22 = checkSetup(container), headerActionDiv = _checkSetup22.headerActionDiv;
             expect(headerActionDiv.children.length).toEqual(1);
 
@@ -864,7 +921,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       }
     }];
     it('should render correctly', function () {
-      var _renderWithValidation24 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation26 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -874,7 +931,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: PAGES
           }
         })),
-        container = _renderWithValidation24.container;
+        container = _renderWithValidation26.container;
       var _checkSetup23 = checkSetup(container),
         headerActionDiv = _checkSetup23.headerActionDiv;
       expect(headerActionDiv.children.length).toEqual(1);
@@ -910,7 +967,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
           return ON_SUBMIT_CALLS.push(patch);
         }
       };
-      var _renderWithValidation25 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation27 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -922,7 +979,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
         }), {
           hooks: hooks
         }),
-        container = _renderWithValidation25.container;
+        container = _renderWithValidation27.container;
       var _checkSetup24 = checkSetup(container),
         headerActionDiv = _checkSetup24.headerActionDiv;
 
@@ -938,7 +995,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       expect(ON_SUBMIT_CALLS.length).toEqual(0);
     });
     it('should return after local validation if errors are present', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
-      var ON_SUBMIT_CALLS, hooks, ON_QUICK_EDIT_CALLS, ON_QUICK_EDIT, _renderWithValidation26, container, _checkSetup25, headerActionDiv, editButton, quickEdit, component, componentInput, quickEditButtons, saveButton;
+      var ON_SUBMIT_CALLS, hooks, ON_QUICK_EDIT_CALLS, ON_QUICK_EDIT, _renderWithValidation28, container, _checkSetup25, headerActionDiv, editButton, quickEdit, component, componentInput, quickEditButtons, saveButton;
       return _regeneratorRuntime().wrap(function _callee6$(_context6) {
         while (1) switch (_context6.prev = _context6.next) {
           case 0:
@@ -953,7 +1010,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               var target = _ref5.target;
               ON_QUICK_EDIT_CALLS.push(target);
             };
-            _renderWithValidation26 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+            _renderWithValidation28 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
               id: ID,
               entryData: _objectSpread(_objectSpread({}, ENTRY), {}, {
                 index: 0
@@ -971,7 +1028,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               }
             }), {
               hooks: hooks
-            }), container = _renderWithValidation26.container;
+            }), container = _renderWithValidation28.container;
             _checkSetup25 = checkSetup(container), headerActionDiv = _checkSetup25.headerActionDiv;
             editButton = headerActionDiv.children[0];
             _react.fireEvent.click(editButton, {});
@@ -1019,7 +1076,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       }, _callee6);
     })));
     it('should run hook validation when local validation is passed', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
-      var ON_SUBMIT_CALLS, hooks, ON_QUICK_EDIT_CALLS, ON_QUICK_EDIT, _renderWithValidation27, container, _checkSetup26, headerActionDiv, editButton, quickEdit, component, componentInput, quickEditButtons, saveButton;
+      var ON_SUBMIT_CALLS, hooks, ON_QUICK_EDIT_CALLS, ON_QUICK_EDIT, _renderWithValidation29, container, _checkSetup26, headerActionDiv, editButton, quickEdit, component, componentInput, quickEditButtons, saveButton;
       return _regeneratorRuntime().wrap(function _callee8$(_context8) {
         while (1) switch (_context8.prev = _context8.next) {
           case 0:
@@ -1038,7 +1095,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               var target = _ref9.target;
               ON_QUICK_EDIT_CALLS.push(target);
             };
-            _renderWithValidation27 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+            _renderWithValidation29 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
               id: ID,
               entryData: ENTRY,
               config: CONFIG,
@@ -1054,7 +1111,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               }
             }), {
               hooks: hooks
-            }), container = _renderWithValidation27.container;
+            }), container = _renderWithValidation29.container;
             _checkSetup26 = checkSetup(container), headerActionDiv = _checkSetup26.headerActionDiv;
             editButton = headerActionDiv.children[0];
             _react.fireEvent.click(editButton, {});
@@ -1092,7 +1149,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       }, _callee8);
     })));
     it('should apply changes if no errors are present', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10() {
-      var ON_SUBMIT_CALLS, hooks, ON_QUICK_EDIT_CALLS, ON_QUICK_EDIT, _renderWithValidation28, container, _checkSetup27, headerActionDiv, editButton, quickEdit, component, componentInput, quickEditButtons, saveButton;
+      var ON_SUBMIT_CALLS, hooks, ON_QUICK_EDIT_CALLS, ON_QUICK_EDIT, _renderWithValidation30, container, _checkSetup27, headerActionDiv, editButton, quickEdit, component, componentInput, quickEditButtons, saveButton;
       return _regeneratorRuntime().wrap(function _callee10$(_context10) {
         while (1) switch (_context10.prev = _context10.next) {
           case 0:
@@ -1107,7 +1164,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               var target = _ref12.target;
               ON_QUICK_EDIT_CALLS.push(target);
             };
-            _renderWithValidation28 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
+            _renderWithValidation30 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
               entryId: "id",
               topLevelErrors: [],
               clearTopLevelErrorsForCard: function clearTopLevelErrorsForCard() {}
@@ -1130,7 +1187,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               }
             })), {
               hooks: hooks
-            }), container = _renderWithValidation28.container;
+            }), container = _renderWithValidation30.container;
             _checkSetup27 = checkSetup(container), headerActionDiv = _checkSetup27.headerActionDiv;
             editButton = headerActionDiv.children[0];
             _react.fireEvent.click(editButton, {});
@@ -1169,7 +1226,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       }, _callee10);
     })));
     it('should remove the isDuplicate flag on a sucessful quick edit', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee12() {
-      var ON_SUBMIT_CALLS, hooks, ON_QUICK_EDIT_CALLS, ON_QUICK_EDIT, _renderWithValidation29, container, _checkSetup28, headerActionDiv, editButton, quickEdit, component, componentInput, quickEditButtons, saveButton;
+      var ON_SUBMIT_CALLS, hooks, ON_QUICK_EDIT_CALLS, ON_QUICK_EDIT, _renderWithValidation31, container, _checkSetup28, headerActionDiv, editButton, quickEdit, component, componentInput, quickEditButtons, saveButton;
       return _regeneratorRuntime().wrap(function _callee12$(_context12) {
         while (1) switch (_context12.prev = _context12.next) {
           case 0:
@@ -1184,7 +1241,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               var target = _ref15.target;
               ON_QUICK_EDIT_CALLS.push(target);
             };
-            _renderWithValidation29 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
+            _renderWithValidation31 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCardValidationContext.default, {
               entryId: "id",
               topLevelErrors: [],
               clearTopLevelErrorsForCard: function clearTopLevelErrorsForCard() {}
@@ -1208,7 +1265,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
               }
             })), {
               hooks: hooks
-            }), container = _renderWithValidation29.container;
+            }), container = _renderWithValidation31.container;
             _checkSetup28 = checkSetup(container), headerActionDiv = _checkSetup28.headerActionDiv;
             editButton = headerActionDiv.children[0];
             _react.fireEvent.click(editButton, {});
@@ -1255,7 +1312,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
         title: 'Title',
         details: DETAILS
       };
-      var _renderWithValidation30 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation32 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -1266,7 +1323,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: []
           }
         })),
-        container = _renderWithValidation30.container;
+        container = _renderWithValidation32.container;
       var _checkSetup29 = checkSetup(container),
         headerContentDiv = _checkSetup29.headerContentDiv;
       var headerDetails = headerContentDiv.children[1];
@@ -1293,7 +1350,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
           }]
         }]
       };
-      var _renderWithValidation31 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation33 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: _objectSpread(_objectSpread({}, ENTRY), {}, {
             field: true
@@ -1306,7 +1363,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: []
           }
         })),
-        container = _renderWithValidation31.container;
+        container = _renderWithValidation33.container;
       var _checkSetup30 = checkSetup(container),
         headerContentDiv = _checkSetup30.headerContentDiv;
       var headerDetails = headerContentDiv.children[1];
@@ -1319,7 +1376,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
         title: 'Title',
         details: ''
       };
-      var _renderWithValidation32 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation34 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -1330,7 +1387,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: []
           }
         })),
-        container = _renderWithValidation32.container;
+        container = _renderWithValidation34.container;
       var _checkSetup31 = checkSetup(container),
         headerContentDiv = _checkSetup31.headerContentDiv;
       // If no details are provided, we expect only the header title to be rendered.
@@ -1347,7 +1404,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
         title: 'Title',
         details: DETAILS
       };
-      var _renderWithValidation33 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation35 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: INTERPOLATED_ENTRY,
           config: CONFIG,
@@ -1358,7 +1415,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: []
           }
         })),
-        container = _renderWithValidation33.container;
+        container = _renderWithValidation35.container;
       var _checkSetup32 = checkSetup(container),
         headerContentDiv = _checkSetup32.headerContentDiv;
       var headerDetails = headerContentDiv.children[1];
@@ -1369,7 +1426,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
       var CONFIG = {
         title: 'Title'
       };
-      var _renderWithValidation34 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation36 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -1380,7 +1437,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: []
           }
         })),
-        container = _renderWithValidation34.container;
+        container = _renderWithValidation36.container;
       var _checkSetup33 = checkSetup(container),
         headerContentDiv = _checkSetup33.headerContentDiv;
       var headerDetails = headerContentDiv.querySelector("#".concat(ID, ".titleDetail"));
@@ -1392,7 +1449,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
         title: 'Title',
         details: DETAILS
       };
-      var _renderWithValidation35 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
+      var _renderWithValidation37 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_SummaryCard.default, {
           id: ID,
           entryData: ENTRY,
           config: CONFIG,
@@ -1404,7 +1461,7 @@ describe('components.CollectionSummary.SummaryCard', function () {
             childPages: []
           }
         })),
-        container = _renderWithValidation35.container;
+        container = _renderWithValidation37.container;
       var detailsComponent = container.querySelector('.details');
       expect(detailsComponent).toBeNull();
     });

package/dist/utils/CollectionPage/getQuickEditPage.js

@@ -55,6 +55,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
  * @returns Page suitble for rendering in a QuickEdit
  */
 var getQuickEditPage = function getQuickEditPage(masterPage, formData, entryData) {
+  var _masterPage$collectio;
   if (!masterPage) {
     return null;
   }
@@ -113,7 +114,7 @@ var getQuickEditPage = function getQuickEditPage(masterPage, formData, entryData
   // Remove ID to stop overwriting top-level form ID.
   var id = entryData.id,
     entryWithNoId = _objectWithoutProperties(entryData, _excluded);
-  pageToReturn.formData = _objectSpread(_objectSpread({}, pageToReturn.formData), entryWithNoId);
+  pageToReturn.formData = _objectSpread(_objectSpread(_objectSpread({}, pageToReturn.formData), entryWithNoId), {}, _defineProperty({}, "".concat((_masterPage$collectio = masterPage.collection) === null || _masterPage$collectio === void 0 || (_masterPage$collectio = _masterPage$collectio.name) === null || _masterPage$collectio === void 0 ? void 0 : _masterPage$collectio.split('.').pop(), "ActiveId"), entryData.id));
   delete pageToReturn.title;
   delete pageToReturn.collection;
   return pageToReturn;

package/dist/utils/CollectionPage/getQuickEditPage.test.js

@@ -19,6 +19,9 @@ describe('Utils.CollectionPage.getQuickEditPage', function () {
     }]
   };
   var MASTER_PAGE = {
+    collection: {
+      name: 'entries'
+    },
     childPages: [{
       id: 'firstPage',
       name: 'firstPage',
@@ -132,4 +135,9 @@ describe('Utils.CollectionPage.getQuickEditPage', function () {
     var createdPage = (0, _getQuickEditPage.default)(MASTER_PAGE, FORM_DATA, CUSTOM_ENTRY_DATA);
     expect(createdPage).toMatchObject(CUSTOM_OUTPUT);
   });
+  it('should return a quick edit page with the activeId for the current collection correctly set', function () {
+    var createdPage = (0, _getQuickEditPage.default)(MASTER_PAGE, FORM_DATA, ENTRY_DATA);
+    expect(createdPage.formData.entriesActiveId).toEqual('123');
+    expect(createdPage).toMatchObject(EXPECTED_OUTPUT);
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukhomeoffice/cop-react-form-renderer",
-  "version": "5.74.3",
+  "version": "5.74.5",
   "private": false,
   "scripts": {
     "clean": "rimraf dist",