feat: auto-focus first fields.

client/src/containers/Dialogs/AccountFormDialog/AccountFormDialogContent.js

@@ -1,8 +1,8 @@
-import React, { useCallback, useMemo, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { Intent } from '@blueprintjs/core';
 import { Formik } from 'formik';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { pick, omit } from 'lodash';
+import { omit } from 'lodash';
 import { useQuery, queryCache } from 'react-query';
 import { AppToaster, DialogContent } from 'components';
 

client/src/containers/Dialogs/AccountFormDialog/AccountFormDialogFields.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Form, FastField, Field, ErrorMessage, useFormikContext } from 'formik';
 import classNames from 'classnames';
 import { FormattedMessage as T } from 'react-intl';
@@ -22,6 +22,7 @@ import withAccounts from 'containers/Accounts/withAccounts';
 
 import { inputIntent } from 'utils';
 import { compose } from 'redux';
+import { useAutofocus } from 'hooks';
 
 /**
  * Account form dialogs fields.
@@ -36,6 +37,7 @@ function AccountFormDialogFields({
   accountsTypes,
 }) {
   const { values, isSubmitting } = useFormikContext();
+  const accountNameFieldRef = useAutofocus();
 
   return (
     <Form>
@@ -75,7 +77,11 @@ function AccountFormDialogFields({
               helperText={<ErrorMessage name="name" />}
               inline={true}
             >
-              <InputGroup medium={true} {...field} />
+              <InputGroup
+                medium={true}
+                inputRef={(ref) => (accountNameFieldRef.current = ref)}
+                {...field}
+              />
             </FormGroup>
           )}
         </FastField>

client/src/containers/Dialogs/ItemCategoryDialog/ItemCategoryForm.js

@@ -19,6 +19,8 @@ import {
 } from 'components';
 import { inputIntent } from 'utils';
 
+import { useAutofocus } from 'hooks';
+
 export default function ItemCategoryForm({
   itemCategoryId,
   accountsList,
@@ -26,6 +28,8 @@ export default function ItemCategoryForm({
   isSubmitting,
   onClose,
 }) {
+  const categoryNameFieldRef = useAutofocus();
+
   // Filters Item Categories list.
   const filterItemCategories = useCallback(
     (query, category, _index, exactMatch) => {
@@ -68,7 +72,11 @@ export default function ItemCategoryForm({
               helperText={<ErrorMessage name="name" />}
               inline={true}
             >
-              <InputGroup medium={true} {...field} />
+              <InputGroup
+                medium={true}
+                inputRef={(ref) => (categoryNameFieldRef.current = ref)}
+                {...field}
+              />
             </FormGroup>
           )}
         </FastField>