feat: auto-focus first fields.

client/src/containers/Customers/CustomerFormPrimarySection.js

@@ -12,12 +12,14 @@ import {
 import CustomerTypeRadioField from 'containers/Customers/CustomerTypeRadioField';
 import { CLASSES } from 'common/classes';
 import { inputIntent } from 'utils';
+import { useAutofocus } from 'hooks';
 
 /**
  * Customer form primary section.
  */
-export default function CustomerFormPrimarySection({
-}) {
+export default function CustomerFormPrimarySection({}) {
+  const firstNameFieldRef = useAutofocus();
+
   return (
     <div className={'customer-form__primary-section-content'}>
       {/**-----------Customer type. -----------*/}
@@ -54,6 +56,7 @@ export default function CustomerFormPrimarySection({
                 placeholder={'First Name'}
                 intent={inputIntent({ error, touched })}
                 className={classNames('input-group--first-name')}
+                inputRef={(ref) => (firstNameFieldRef.current = ref)}
                 {...field}
               />
             )}

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>

client/src/containers/Items/ItemFormPrimarySection.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   FormGroup,
   InputGroup,
@@ -40,6 +40,14 @@ function ItemFormPrimarySection({
   // #ownProps
   itemType,
 }) {
+  const nameFieldRef = useRef(null);
+
+  useEffect(() => {
+    // Auto focus item name field once component mount.
+    if (nameFieldRef.current) {
+      nameFieldRef.current.focus();
+    }
+  }, []);
 
   const itemTypeHintContent = (
     <>
@@ -112,7 +120,11 @@ function ItemFormPrimarySection({
                 helperText={<ErrorMessage name={'name'} />}
                 inline={true}
               >
-                <InputGroup medium={true} {...field} />
+                <InputGroup
+                  medium={true}
+                  {...field}
+                  inputRef={(ref) => (nameFieldRef.current = ref)}
+                />
               </FormGroup>
             )}
           </FastField>

client/src/containers/Vendors/VendorFormPrimarySection.js

@@ -13,10 +13,14 @@ import {
 import { CLASSES } from 'common/classes';
 import { inputIntent } from 'utils';
 
+import { useAutofocus } from 'hooks';
+
 /**
  * Vendor form primary section.
  */
 function VendorFormPrimarySection() {
+  const firstNameFieldRef = useAutofocus();
+
   return (
     <div className={'customer-form__primary-section-content'}>
       {/**----------- Vendor name -----------*/}
@@ -50,6 +54,7 @@ function VendorFormPrimarySection() {
                 placeholder={'First Name'}
                 intent={inputIntent({ error, touched })}
                 className={classNames('input-group--first-name')}
+                inputRef={(ref) => (firstNameFieldRef.current = ref)}
                 {...field}
               />
             )}

client/src/hooks/index.js

@@ -1,5 +1,6 @@
 import {useRef, useEffect} from 'react';
 import useAsync from './async';
+import useAutofocus from './useAutofocus';
 
 // import use from 'async';
 
@@ -34,8 +35,7 @@ export function useIsValuePassed(value, compatatorValue) {
   return cache.current.indexOf(compatatorValue) !== -1;
 }
 
-
-export default {
+export {
   useAsync,
-  useUpdateEffect,
+  useAutofocus,
 }

client/src/hooks/useAutofocus.js

@@ -0,0 +1,13 @@
+import { useRef, useEffect } from 'react';
+
+export default function useAutofocus() {
+  const ref = useRef();
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.focus();
+    }
+  }, [ref]);
+
+  return ref;
+}