ERM-3386, On New agreement the agreement name field should have focus (…

…#1360) * ERM-3386, On New agreement the agreement name field should have focus * fix: Fix for startDate no longer grabbing focus Proposed fix removed the focus being applied when a new period is added. This solution differentiates between bootstrapped startDate ('') and added startDates (undefined) to work out when to grab focus ERM-3386 --------- Co-authored-by: Ethan Freestone <[email protected]>
folio-org · Oct 21, 2024 · 150bf02 · 150bf02
1 parent ea68cc7
commit 150bf02
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/components/AgreementPeriodsFieldArray/AgreementPeriodField.js b/src/components/AgreementPeriodsFieldArray/AgreementPeriodField.js
@@ -1,8 +1,10 @@
 import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { get } from 'lodash';
+
 import { FormattedMessage, useIntl } from 'react-intl';
-import { Field } from 'react-final-form';
+import { Field, useFormState } from 'react-final-form';
+
+import get from 'lodash/get';
 
 import {
   AppValidatedDatepicker,
@@ -29,12 +31,14 @@ const AgreementPeriodField = ({ index, input: { name } }) => {
   const dateFormat = getLocaleDateFormat({ intl });
   const backendDateStandard = 'YYYY-MM-DD';
 
+  const { values } = useFormState();
+
   useEffect(() => {
-    const value = get(startDateInputRef, 'current.value');
-    if ((value === '' || value === undefined) && get(startDateInputRef, 'current')) {
+    const startDateValue = get(values, `${name}.startDate`);
+    if (startDateValue === undefined && startDateInputRef?.current) {
       startDateInputRef.current.focus();
     }
-  }, [startDateInputRef]);
+  }, [name, startDateInputRef, values]);
 
   return (
     <div

diff --git a/src/components/AgreementPeriodsFieldArray/AgreementPeriodsFieldArray.js b/src/components/AgreementPeriodsFieldArray/AgreementPeriodsFieldArray.js
@@ -47,6 +47,7 @@ const AgreementPeriodsFieldArray = ({
       >
         {renderPeriods()}
       </div>
+      {/* Initial startDate is '', but all subsequent should be undefined to ensure we can grab focus */}
       <Button id="add-period-button" onClick={() => onAddField()}>
         <FormattedMessage id="ui-agreements.agreementPeriods.addPeriod" />
       </Button>

diff --git a/src/routes/AgreementCreateRoute/AgreementCreateRoute.js b/src/routes/AgreementCreateRoute/AgreementCreateRoute.js
@@ -122,7 +122,13 @@ const AgreementCreateRoute = ({
   };
 
   const getInitialValues = () => {
-    const periods = [{}];
+    /*
+     * We initialise startDate to an empty string
+     * so that we can differentiate the always
+     * present period from those added by the user.
+     * This allows us to focus them as we please.
+     */
+    const periods = [{ startDate: '' }];
     let items;
 
     // if authority && referenceId exist we can assume the call came from eholdings