feat(list): scroll to error

package.json

@@ -27,6 +27,7 @@
         "@testing-library/react": "^12.1.5",
         "@testing-library/react-hooks": "^8.0.1",
         "@testing-library/user-event": "^12.8.3",
+        "@types/final-form-focus": "^1.1.6",
         "@types/jest": "^29.5.3",
         "@types/react": "^18.2.6",
         "@typescript-eslint/eslint-plugin": "^5.55.0",
@@ -39,6 +40,8 @@
         "@dhis2/app-runtime": "^3.9.3",
         "@dhis2/ui": "8.14.2-alpha.1",
         "@types/lodash": "^4.14.198",
+        "final-form": "^4.20.10",
+        "final-form-focus": "^1.1.2",
         "lodash": "^4.17.21",
         "react-color": "^2.19.3",
         "react-error-boundary": "^4.0.11",

src/pages/dataElements/New.tsx

@@ -2,6 +2,7 @@ import { useDataEngine } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import { NoticeBox } from '@dhis2/ui'
 import { FORM_ERROR } from 'final-form'
+import createFocusDecorator from 'final-form-focus'
 import React, { useEffect, useMemo, useRef } from 'react'
 import { Form } from 'react-final-form'
 import { useNavigate } from 'react-router-dom'
@@ -23,6 +24,8 @@ import classes from './New.module.css'
 
 const listPath = `/${getSectionPath(SCHEMA_SECTIONS.dataElement)}`
 
+const focusDecorator = createFocusDecorator<FormValues>()
+
 function useInitialValues(customAttributes: Attribute[]) {
     const schemas = useSchemas()
 
@@ -123,7 +126,6 @@ export const Component = () => {
 
     async function onSubmit(values: FormValues) {
         const payload = formatFormValues({ values })
-
         try {
             // We want the promise so we know when submitting is done. The promise
             // returned by the mutation function of useDataMutation will never
@@ -143,6 +145,7 @@ export const Component = () => {
             onSubmit={onSubmit}
             initialValues={initialValues}
             validate={validate}
+            decorators={[focusDecorator]}
         >
             {({ handleSubmit, submitting, submitError }) => (
                 <form onSubmit={handleSubmit}>

yarn.lock

@@ -3115,6 +3115,13 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/final-form-focus@^1.1.6":
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/@types/final-form-focus/-/final-form-focus-1.1.6.tgz#37d73a9ce97cc0595105507f8592c83edd373271"
+  integrity sha512-FeDXQHFfrlE/wgdcqXooycpJ1KuM6vYKu8OIXCwFl0UK7hTu41TZS4BJS9wZriHPf98BUrIZMn2ZZWMZGoqB9Q==
+  dependencies:
+    final-form "4.x.x"
+
 "@types/graceful-fs@^4.1.2":
   version "4.1.6"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.6.tgz#e14b2576a1c25026b7f02ede1de3b84c3a1efeae"
@@ -6829,6 +6836,18 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+final-form-focus@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/final-form-focus/-/final-form-focus-1.1.2.tgz#8ea5c4bd802e220cebaa47a587bb0be164eb6806"
+  integrity sha512-Gd+Bd2Ll7ijo3/sd6kJ/bwLkhc2bUJPxTON6fIqee/008EJpACWhT+zoWCm9q6NcfMcWRS+Sp5ikRX8iqdXeGQ==
+
+[email protected], final-form@^4.20.10:
+  version "4.20.10"
+  resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.20.10.tgz#1a484be6e9a91989121c054dcbd6f48bad051ecc"
+  integrity sha512-TL48Pi1oNHeMOHrKv1bCJUrWZDcD3DIG6AGYVNOnyZPr7Bd/pStN0pL+lfzF5BNoj/FclaoiaLenk4XUIFVYng==
+  dependencies:
+    "@babel/runtime" "^7.10.0"
+
 final-form@^4.20.2:
   version "4.20.9"
   resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.20.9.tgz#647b459f8c504d77ec8f6e280015ab172982af2f"