Remove focusing from ErrorSummary entirely - this is now up to the ca…

…lling app

CHANGELOG.md

@@ -12,6 +12,13 @@
 
 ## Releases
 
+### v5.0.0
+
+- Further ErrorSummary focusing fixes
+  The error summary no longer focuses itself at all when it is rendered - it is now fully up to the calling app to focus the error summary when appropriate.
+  The ErrorSummary component accepts a ref which you can use to achieve this.
+  A formik based demo of this is available in [https://github.com/surevine/govuk-react-jsx-examples/blob/master/src/forms/Formik.js](govuk-react-jsx-examples)
+
 ### v4.1.1
 
 #### Fixes
@@ -22,7 +29,6 @@
 - Update govuk-frontend to 3.10.2
   See https://github.com/alphagov/govuk-frontend/releases/tag/v3.10.1 and https://github.com/alphagov/govuk-frontend/releases/tag/v3.10.2 fox full release notes
 
-
 ### v4.1.0
 
 #### Features

README.md

@@ -69,6 +69,7 @@ Exceptions to the conformance with govuk-frontend nunjucks params are as follows
 - List keys - Anywhere that you specify an array of items such as a list of links, you may optionally specify a `reactListKey` for each item. This will be used instead of the index when doing `.map` over the items. React uses these keys internally to work out whether to re-render items. This is crucial for dynamic components where you might re-sort the list items for example. For static data it is less important and the key can be omitted. (See https://reactjs.org/docs/lists-and-keys.html#keys for more)
   (_The only exception to this rule is the tab component, where the tabs are already sufficiently keyed by id_)
 - The `<Select>` component and `<Radios>` components take a top level `value` prop, instead of setting `checked` or `selected` on the individual items. This is more in line with React and React-based form libraries
+- The `<ErrorSummary>` component does not automatically focus itself when errors occur - it is up to the calling app to focus it when appropriate, such as when a submit button is pressed.
 
 See [utils/processExampleData.js](utils/processExampleData.js) for the complete list of transformations.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "govuk-react-jsx",
-  "version": "4.1.1",
+  "version": "5.0.0",
   "description": "React component ports of govuk-frontend nunjucks macros. Directly consuming govuk-frontend CSS & JS.",
   "main": "src/govuk/index.js",
   "scripts": {

src/govuk/components/error-summary/index.js

@@ -23,7 +23,12 @@ const ErrorSummary = React.forwardRef((props, ref) => {
           'govuk-frontend/govuk/components/error-summary/error-summary'
         );
 
-        new ErrorSummaryJS(errorSummaryRef.current).init();
+        // Just bind the click event handlers from the gov error summary
+        // This is because we don't want to focus by default - that's up to the calling app
+        errorSummaryRef.current.addEventListener(
+          'click',
+          ErrorSummaryJS.prototype.handleClick.bind(ErrorSummaryJS.prototype)
+        );
       }
     })();
   }, [errorSummaryRef]);