diff --git a/package.json b/package.json index 973b47a4..f72487ca 100644 --- a/package.json +++ b/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", diff --git a/src/pages/dataElements/New.tsx b/src/pages/dataElements/New.tsx index 6f90422a..a284d00b 100644 --- a/src/pages/dataElements/New.tsx +++ b/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() + 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 }) => (
diff --git a/yarn.lock b/yarn.lock index ffe871f7..7bc0c91e 100644 --- a/yarn.lock +++ b/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== + +final-form@4.x.x, 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"