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

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/package.json

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