@ukhomeoffice/cop-react-form-renderer 5.18.1 → 5.19.1

package/dist/components/FormComponent/Collection.js

@@ -91,6 +91,17 @@ var Collection = function Collection(_ref) {
       return _ref3.apply(this, arguments);
     };
   }();
+  (0, _react.useEffect)(function () {
+    if (config.focusOnAdd && Array.isArray(value) && value.length) {
+      if (value.length > config.minimumEntries || !config.minimumEntries) {
+        var _value2, _document$getElementB, _focusable$;
+        var containerId = (_value2 = value[value.length - 1]) === null || _value2 === void 0 ? void 0 : _value2.id;
+        var container = (_document$getElementB = document.getElementById(containerId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.childNodes[0];
+        var focusable = container === null || container === void 0 ? void 0 : container.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        (_focusable$ = focusable[0]) === null || _focusable$ === void 0 ? void 0 : _focusable$.focus();
+      }
+    }
+  }, [value.length, config.focusOnAdd, config.minimumEntries]);
   (0, _react.useEffect)(function () {
     if (config.minimumEntries && !value.length) {
       onAddAnother();
@@ -216,6 +227,7 @@ Collection.propTypes = {
     readonly: _propTypes.default.bool,
     removeLocation: _propTypes.default.string,
     subsequentItemStyle: _propTypes.default.shape({}),
+    focusOnAdd: _propTypes.default.bool,
     required: _propTypes.default.bool
   }).isRequired,
   formData: _propTypes.default.shape({}),

package/dist/components/FormComponent/Collection.test.js

@@ -805,4 +805,163 @@ describe('components.FormComponent.Collection', function () {
       }
     }, _callee14);
   })));
+  it('should shift focus to most recent item on addition and removal of an item when focusOnAdd is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee16() {
+    var COLLECTION, container, c, addButton, item, label, secondItem, secondItemLabel, removeButton;
+    return _regeneratorRuntime().wrap(function _callee16$(_context16) {
+      while (1) switch (_context16.prev = _context16.next) {
+        case 0:
+          COLLECTION = {
+            id: ID,
+            fieldId: ID,
+            type: _models.ComponentTypes.COLLECTION,
+            item: [TEXT_COMPONENT],
+            focusOnAdd: true
+          };
+          container = document.createElement('div');
+          document.body.appendChild(container);
+          _context16.next = 5;
+          return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee15() {
+            return _regeneratorRuntime().wrap(function _callee15$(_context15) {
+              while (1) switch (_context15.prev = _context15.next) {
+                case 0:
+                  (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+                    component: COLLECTION
+                  }), container);
+                case 1:
+                case "end":
+                  return _context15.stop();
+              }
+            }, _callee15);
+          })));
+        case 5:
+          // Check the container itself.
+          c = container.childNodes[0];
+          expect(c.tagName).toEqual('DIV');
+          expect(c.classList).toContain(_Collection.DEFAULT_CLASS);
+
+          // And now make sure it has no children OTHER than the button to add an item.
+          expect(c.childNodes.length).toEqual(1);
+
+          // Get hold of that "Add another" button and click it.
+          addButton = c.childNodes[0].childNodes[0];
+          _react.fireEvent.click(addButton, {});
+
+          // Make sure an item has been added.
+          expect(c.childNodes.length).toEqual(2);
+          item = c.childNodes[0];
+          label = item.childNodes[0];
+          expect(label.textContent).toContain(_utils.default.interpolateString(_models.CollectionLabels.item, {
+            index: 1
+          }));
+
+          // Check to see if the item's text input is in focus
+          expect(document.activeElement === item.childNodes[1].childNodes[0].querySelector("input")).toEqual(true);
+
+          // Add another item and check if the second item has been added and it's input is in focus
+          _react.fireEvent.click(addButton, {});
+          secondItem = c.childNodes[1];
+          secondItemLabel = secondItem.childNodes[0];
+          expect(c.childNodes.length).toEqual(3);
+          expect(document.activeElement === secondItem.childNodes[1].childNodes[0].querySelector("input")).toEqual(true);
+
+          // Get hold of the second item's "Remove" button.
+          removeButton = secondItemLabel.childNodes[1];
+          expect(removeButton.tagName).toEqual('BUTTON');
+          expect(removeButton.classList).toContain('hods-button--secondary');
+          expect(removeButton.textContent).toContain(_models.CollectionLabels.remove);
+
+          // Click the "Remove" button
+          _react.fireEvent.click(removeButton, {});
+
+          // Make sure the second item has been removed.
+          expect(c.childNodes.length).toEqual(2);
+          expect(c.childNodes[1].classList).toContain('hods-button-group');
+
+          // Check to see if the first item is now in focus
+          expect(document.activeElement === item.childNodes[1].childNodes[0].querySelector("input")).toEqual(true);
+        case 29:
+        case "end":
+          return _context16.stop();
+      }
+    }, _callee16);
+  })));
+  it('should not focus on first item when minimumEntries is 1 and focus on added item instead when focusOnAdd is true', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee18() {
+    var COLLECTION, container, c, item, _item$childNodes6, title, itemContainer, formGroup, label, hint, input, addButton, secondItem;
+    return _regeneratorRuntime().wrap(function _callee18$(_context18) {
+      while (1) switch (_context18.prev = _context18.next) {
+        case 0:
+          COLLECTION = {
+            id: ID,
+            fieldId: ID,
+            type: _models.ComponentTypes.COLLECTION,
+            item: [TEXT_COMPONENT],
+            focusOnAdd: true,
+            minimumEntries: 1
+          };
+          container = document.createElement('div');
+          document.body.appendChild(container);
+          _context18.next = 5;
+          return (0, _testUtils.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee17() {
+            return _regeneratorRuntime().wrap(function _callee17$(_context17) {
+              while (1) switch (_context17.prev = _context17.next) {
+                case 0:
+                  (0, _setupTests.renderDomWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormComponent.default, {
+                    component: COLLECTION
+                  }), container);
+                case 1:
+                case "end":
+                  return _context17.stop();
+              }
+            }, _callee17);
+          })));
+        case 5:
+          // Check the container itself.
+          c = container.childNodes[0];
+          expect(c.tagName).toEqual('DIV');
+          expect(c.classList).toContain(_Collection.DEFAULT_CLASS);
+
+          // And now check the single text component within it.
+          item = c.childNodes[0];
+          expect(item.tagName).toEqual('DIV');
+          expect(item.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__item"));
+          _item$childNodes6 = _slicedToArray(item.childNodes, 2), title = _item$childNodes6[0], itemContainer = _item$childNodes6[1];
+          expect(title.tagName).toEqual('LABEL');
+          expect(title.classList).toContain("".concat(_Collection.DEFAULT_CLASS, "__item-title"));
+          expect(itemContainer.tagName).toEqual('DIV');
+          expect(itemContainer.classList).toContain(_Container.DEFAULT_CLASS);
+          formGroup = itemContainer.childNodes[0];
+          expect(formGroup.tagName).toEqual('DIV');
+          expect(formGroup.classList).toContain('govuk-form-group');
+          label = formGroup.childNodes[0];
+          expect(label.tagName).toEqual('LABEL');
+          expect(label.classList).toContain('govuk-label');
+          expect(label.textContent).toEqual("".concat(TEXT_COMPONENT.label, " (optional)"));
+          expect(label.getAttribute('for')).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
+          hint = formGroup.childNodes[1];
+          expect(hint.tagName).toEqual('DIV');
+          expect(hint.classList).toContain('govuk-hint');
+          expect(hint.textContent).toEqual(TEXT_COMPONENT.hint);
+          input = formGroup.childNodes[2];
+          expect(input.tagName).toEqual('INPUT');
+          expect(input.classList).toContain('govuk-input');
+          expect(input.id).toEqual("".concat(ID, "[0].").concat(TEXT_ID));
+          expect(input.value).toEqual('');
+
+          // Check to see if the item's text input is not in focus
+          expect(document.activeElement === item.childNodes[1].childNodes[0].querySelector("input")).toEqual(false);
+
+          // Get hold of that "Add another" button and click it.
+          addButton = c.childNodes[1].childNodes[0];
+          _react.fireEvent.click(addButton, {});
+
+          // Check if the second item has been added and it's input is in focus
+          secondItem = c.childNodes[1];
+          expect(c.childNodes.length).toEqual(3);
+          expect(document.activeElement === secondItem.childNodes[1].childNodes[0].querySelector("input")).toEqual(true);
+        case 39:
+        case "end":
+          return _context18.stop();
+      }
+    }, _callee18);
+  })));
 });

package/dist/components/FormRenderer/helpers/getSubmissionStatus.js

@@ -9,7 +9,6 @@ var _getNextPageId = _interopRequireDefault(require("./getNextPageId"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var getSubmissionStatus = function getSubmissionStatus(formType, pages, currentPageId, action, formData, currentTask, isCompleted, sections) {
   if (formType === _models.FormTypes.TASK || formType === _models.FormTypes.FORM_WITH_TASK) {
-    var _currentTask$pages;
     var formStatus = formData.formStatus || {};
     formStatus.tasks = formStatus.tasks || {};
     formStatus.tasks[currentTask.name] = formStatus.tasks[currentTask.name] || {};
@@ -43,7 +42,7 @@ var getSubmissionStatus = function getSubmissionStatus(formType, pages, currentP
         complete: false,
         currentPage: (0, _getNextPageId.default)(formType, pages, currentPageId, action, formData)
       };
-    } else if ((_currentTask$pages = currentTask.pages) !== null && _currentTask$pages !== void 0 && _currentTask$pages.includes(currentPageId)) {
+    } else {
       formStatus.tasks[currentTask.name] = {
         complete: !!(action !== null && action !== void 0 && action.complete),
         currentPage: currentPageId

package/dist/components/FormRenderer/helpers/getSubmissionStatus.test.js

@@ -275,26 +275,6 @@ describe('components', function () {
               })
             });
           });
-          it('should not update the current task state if the current page does not belong in the task', function () {
-            var CUSTOM_FORM_TYPE = _models.FormTypes.FORM_WITH_TASK;
-            var ACTION = _models.PageAction.DEFAULTS.saveAndContinue;
-            var CURRENT_TASK = {
-              name: 'test-task',
-              pages: ['page-a']
-            };
-            var CURRENT_PAGE_ID = 'page-b';
-            var CUSTOM_FORM_DATA = {
-              formStatus: {
-                tasks: {
-                  'test-task': {
-                    complete: false,
-                    currentPage: 'page-a'
-                  }
-                }
-              }
-            };
-            expect((0, _getSubmissionStatus.default)(CUSTOM_FORM_TYPE, PAGES, CURRENT_PAGE_ID, ACTION, CUSTOM_FORM_DATA, CURRENT_TASK, true, [])).toMatchObject(CUSTOM_FORM_DATA.formStatus);
-          });
         });
       });
     });

package/package.json

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