fix: optimize item form performance.

client/src/containers/Accounting/MakeJournalEntriesTable.js

@@ -292,7 +292,7 @@ export default compose(
   withAccounts(({ accountsList }) => ({
     accountsList,
   })),
-  withCustomers(({ customersItems }) => ({
+  withCustomers(({ customers }) => ({
-    customers: customersItems,
+    customers,
   })),
 )(MakeJournalEntriesTable);

client/src/containers/Items/ItemForm.js

@@ -1,9 +1,7 @@
 import React, { useMemo, useCallback, useEffect } from 'react';
 import * as Yup from 'yup';
-import { useFormik } from 'formik';
+import { useFormik, Formik, Form } from 'formik';
-import {
+import { Intent } from '@blueprintjs/core';
-  Intent
-} from '@blueprintjs/core';
 import { queryCache } from 'react-query';
 import { useHistory } from 'react-router-dom';
 import { pick, pickBy } from 'lodash';
@@ -41,7 +39,6 @@ const defaultInitialValues = {
   purchasable: true,
 };
 
-
 /**
  * Item form.
  */
@@ -88,14 +85,12 @@ function ItemForm({
       .required()
       .label(formatMessage({ id: 'item_type_' })),
     sku: Yup.string().trim(),
-    cost_price: Yup.number()
+    cost_price: Yup.number().when(['purchasable'], {
-      .when(['purchasable'], {
       is: true,
       then: Yup.number().required(),
       otherwise: Yup.number().nullable(true),
     }),
-    sell_price: Yup.number()
+    sell_price: Yup.number().when(['sellable'], {
-      .when(['sellable'], {
       is: true,
       then: Yup.number().required(),
       otherwise: Yup.number().nullable(true),
@@ -145,21 +140,24 @@ function ItemForm({
   );
 
   useEffect(() => {
-    (!isNewMode)
+    !isNewMode
       ? changePageTitle(formatMessage({ id: 'edit_item_details' }))
       : changePageTitle(formatMessage({ id: 'new_item' }));
   }, [changePageTitle, isNewMode, formatMessage]);
 
   const transformApiErrors = (errors) => {
     const fields = {};
-    if (errors.find(e => e.type === 'ITEM.NAME.ALREADY.EXISTS')) {
+    if (errors.find((e) => e.type === 'ITEM.NAME.ALREADY.EXISTS')) {
-      fields.name = formatMessage({ id: 'the_name_used_before' })
+      fields.name = formatMessage({ id: 'the_name_used_before' });
     }
     return fields;
-  }
+  };
 
   // Handles the form submit.
-  const handleFormSubmit = (values, { setSubmitting, resetForm, setErrors }) => {
+  const handleFormSubmit = (
+    values,
+    { setSubmitting, resetForm, setErrors },
+  ) => {
     setSubmitting(true);
     const form = { ...values };
 
@@ -167,9 +165,9 @@ function ItemForm({
       AppToaster.show({
         message: formatMessage(
           {
-            id: (isNewMode) ?
+            id: isNewMode
-              'service_has_been_successful_created' : 
+              ? 'service_has_been_successful_created'
-              'the_item_has_been_successfully_edited',
+              : 'the_item_has_been_successfully_edited',
           },
           {
             number: itemId,
@@ -196,28 +194,13 @@ function ItemForm({
     }
   };
 
-  const {
+  // useEffect(() => {
-    getFieldProps,
+  //   if (values.item_type) {
-    setFieldValue,
+  //     changePageSubtitle(formatMessage({ id: values.item_type }));
-    values,
+  //   } else {
-    touched,
+  //     changePageSubtitle('');
-    errors,
+  //   }
-    handleSubmit,
+  // }, [values.item_type, changePageSubtitle, formatMessage]);
-    isSubmitting,
-  } = useFormik({
-    enableReinitialize: true,
-    validationSchema: validationSchema,
-    initialValues,
-    onSubmit: handleFormSubmit
-  });
-
-  useEffect(() => {
-    if (values.item_type) {
-      changePageSubtitle(formatMessage({ id: values.item_type }));
-    } else {
-      changePageSubtitle('');
-    }
-  }, [values.item_type, changePageSubtitle, formatMessage]);
 
   const initialAttachmentFiles = useMemo(() => {
     return itemDetail && itemDetail.media
@@ -229,9 +212,12 @@ function ItemForm({
       : [];
   }, [itemDetail]);
 
-  const handleDropFiles = useCallback((_files) => {
+  const handleDropFiles = useCallback(
+    (_files) => {
       setFiles(_files.filter((file) => file.uploaded === false));
-  }, [setFiles]);
+    },
+    [setFiles],
+  );
 
   const handleDeleteFile = useCallback(
     (_deletedFiles) => {
@@ -250,39 +236,30 @@ function ItemForm({
 
   return (
     <div class={classNames(CLASSES.PAGE_FORM_ITEM)}>
-      <form onSubmit={handleSubmit}>
+      <Formik
+        enableReinitialize={true}
+        validationSchema={validationSchema}
+        initialValues={initialValues}
+        onSubmit={handleFormSubmit}
+      >
+        {({ isSubmitting }) => (
+          <Form>
             <div class={classNames(CLASSES.PAGE_FORM_BODY)}>
-          <ItemFormPrimarySection
+              <ItemFormPrimarySection />
-            errors={errors}
+              <ItemFormBody />
-            touched={touched}
+              <ItemFormInventorySection />
-            values={values}
-            getFieldProps={getFieldProps}
-            setFieldValue={setFieldValue}
-          />
-          <ItemFormBody
-            touched={touched}
-            errors={errors}
-            values={values}
-            getFieldProps={getFieldProps}
-            setFieldValue={setFieldValue}
-          />
-          <ItemFormInventorySection
-            errors={errors}
-            touched={touched}
-            values={values}
-            setFieldValue={setFieldValue}
-            getFieldProps={getFieldProps}
-          />
             </div>
             <ItemFormFloatingActions
               isSubmitting={isSubmitting}
               itemId={itemId}
               onCancelClick={handleCancelBtnClick}
             />
-      </form>
+          </Form>
+        )}
+      </Formik>
     </div>
   );
-};
+}
 
 export default compose(
   withItemsActions,

client/src/containers/Items/ItemFormBody.js

@@ -1,15 +1,14 @@
 import React from 'react';
+import { FastField, ErrorMessage } from 'formik';
 import {
   FormGroup,
   Intent,
-  InputGroup,
   Classes,
   Checkbox,
 } from '@blueprintjs/core';
 import {
   AccountsSelectList,
   MoneyInputGroup,
-  ErrorMessage,
   Col,
   Row,
   Hint,
@@ -18,74 +17,67 @@ import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
 import withAccounts from 'containers/Accounts/withAccounts';
 
-import { compose } from 'utils';
+import { compose, inputIntent } from 'utils';
 
 /**
  * Item form body.
  */
-function ItemFormBody({
+function ItemFormBody({ accountsList }) {
-  getFieldProps,
-  touched,
-  errors,
-  values,
-  setFieldValue,
-
-  accountsList,
-}) {
   return (
     <div class="page-form__section page-form__section--selling-cost">
       <Row>
         <Col xs={6}>
-          {/*------------- Sellable checkbox ------------- */}
+          {/*------------- Purchasable checbox ------------- */}
+          <FastField name={'sellable'}>
+            {({ field, field: { value } }) => (
               <FormGroup inline={true} className={'form-group--sellable'}>
                 <Checkbox
                   inline={true}
                   label={
                     <h3>
-                  <T id={'i_purchase_this_item'} />
+                      <T id={'i_sell_this_item'} />
                     </h3>
                   }
-              checked={values.sellable}
+                  defaultChecked={value}
-              {...getFieldProps('sellable')}
+                  {...field}
                 />
               </FormGroup>
+            )}
+          </FastField>
 
           {/*------------- Selling price ------------- */}
+          <FastField name={'sell_price'}>
+            {({ form, field, field: { value }, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'selling_price'} />}
-            className={'form-group--item-selling-price'}
+                className={'form-group--sell_price'}
-            intent={errors.sell_price && touched.sell_price && Intent.DANGER}
+                intent={inputIntent({ error, touched })}
-            helperText={
+                helperText={<ErrorMessage name={'sell_price'} />}
-              <ErrorMessage {...{ errors, touched }} name="sell_price" />
-            }
                 inline={true}
               >
                 <MoneyInputGroup
-              value={values.sell_price}
+                  value={value}
                   prefix={'$'}
-              onChange={(e, value) => {
-                setFieldValue('sell_price', value);
-              }}
                   inputGroupProps={{
                     medium: true,
-                intent:
+                    // intent: error && touched/ && Intent.DANGER,
-                  errors.sell_price && touched.sell_price && Intent.DANGER,
                   }}
-              disabled={!values.sellable}
+                  disabled={!form.values.sellable}
+                  onChange={field.onChange}
                 />
               </FormGroup>
+            )}
+          </FastField>
 
            {/*------------- Selling account ------------- */}
+          <FastField name={'sell_account_id'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'account'} />}
                 labelInfo={<Hint />}
                 inline={true}
-            intent={
+                intent={inputIntent({ error, touched })}
-              errors.sell_account_id && touched.sell_account_id && Intent.DANGER
+                helperText={<ErrorMessage name="sell_account_id" />}
-            }
-            helperText={
-              <ErrorMessage {...{ errors, touched }} name="sell_account_id" />
-            }
                 className={classNames(
                   'form-group--sell-account',
                   'form-group--select-list',
@@ -95,67 +87,69 @@ function ItemFormBody({
                 <AccountsSelectList
                   accounts={accountsList}
                   onAccountSelected={(account) => {
-                setFieldValue('sell_account_id', account.id);
+                    form.setFieldValue('sell_account_id', account.id);
                   }}
                   defaultSelectText={<T id={'select_account'} />}
-              selectedAccountId={values.sell_account_id}
+                  selectedAccountId={value}
-              disabled={!values.sellable}
+                  disabled={!form.values.sellable}
                   filterByTypes={['income']}
                 />
               </FormGroup>
+            )}
+          </FastField>
         </Col>
 
         <Col xs={6}>
-          {/*------------- Purchasable checbox ------------- */}
+          {/*------------- Sellable checkbox ------------- */}
+          <FastField name={'purchasable'}>
+            {({ field, field: { value }, meta: { error, touched } }) => (
               <FormGroup inline={true} className={'form-group--purchasable'}>
                 <Checkbox
                   inline={true}
                   label={
                     <h3>
-                  <T id={'i_sell_this_item'} />
+                      <T id={'i_purchase_this_item'} />
                     </h3>
                   }
-              defaultChecked={values.purchasable}
+                  checked={value}
-              {...getFieldProps('purchasable')}
+                  {...field}
                 />
               </FormGroup>
+            )}
+          </FastField>
 
           {/*------------- Cost price ------------- */}
+          <FastField name={'cost_price'}>
+            {({ field, form, field: { value }, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'cost_price'} />}
                 className={'form-group--item-cost-price'}
-            intent={errors.cost_price && touched.cost_price && Intent.DANGER}
+                intent={inputIntent({ error, touched })}
-            helperText={
+                helperText={<ErrorMessage name="cost_price" />}
-              <ErrorMessage {...{ errors, touched }} name="cost_price" />
-            }
                 inline={true}
               >
                 <MoneyInputGroup
-              value={values.cost_price}
+                  value={value}
                   prefix={'$'}
-              onChange={(e, value) => {
-                setFieldValue('cost_price', value);
-              }}
                   inputGroupProps={{
                     medium: true,
-                intent:
-                  errors.cost_price && touched.cost_price && Intent.DANGER,
                   }}
-              disabled={!values.purchasable}
+                  disabled={!form.values.purchasable}
+                  {...field}
                 />
               </FormGroup>
+            )}
+          </FastField>
 
           {/*------------- Cost account ------------- */}
+          <FastField name={'cost_account_id'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'account'} />}
                 labelInfo={<Hint />}
                 inline={true}
-            intent={
+                intent={inputIntent({ error, touched })}
-              errors.cost_account_id && touched.cost_account_id && Intent.DANGER
+                helperText={<ErrorMessage name="cost_account_id" />}
-            }
-            helperText={
-              <ErrorMessage {...{ errors, touched }} name="cost_account_id" />
-            }
                 className={classNames(
                   'form-group--cost-account',
                   'form-group--select-list',
@@ -165,14 +159,16 @@ function ItemFormBody({
                 <AccountsSelectList
                   accounts={accountsList}
                   onAccountSelected={(account) => {
-                setFieldValue('cost_account_id', account.id);
+                    form.setFieldValue('cost_account_id', account.id);
                   }}
                   defaultSelectText={<T id={'select_account'} />}
-              selectedAccountId={values.cost_account_id}
+                  selectedAccountId={value}
-              disabled={!values.purchasable}
+                  disabled={!form.values.purchasable}
                   filterByTypes={['cost_of_goods_sold']}
                 />
               </FormGroup>
+            )}
+          </FastField>
         </Col>
       </Row>
     </div>

client/src/containers/Items/ItemFormFloatingActions.js

@@ -1,24 +1,15 @@
-import React from 'react';
+import React, { memo } from 'react';
-import {
+import { Button, Intent, FormGroup, Checkbox } from '@blueprintjs/core';
-  Button,
-  Intent,
-  FormGroup,
-  Checkbox
-} from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import { saveInvoke } from 'utils';
 import classNames from 'classnames';
-
+import { ErrorMessage, FastField } from 'formik';
 import { CLASSES } from 'common/classes';
 
 /**
  * Item form floating actions.
  */
-export default function ItemFormFloatingActions({
+export default function ItemFormFloatingActions({ isSubmitting, itemId, onCancelClick }) {
-  isSubmitting,
-  itemId,
-  onCancelClick
-}) {
   const handleCancelBtnClick = (event) => {
     saveInvoke(onCancelClick, event.currentTarget.value);
   };
@@ -37,18 +28,24 @@ export default function ItemFormFloatingActions({
       </Button>
 
       {/*----------- Active ----------*/}
-      <FormGroup
+      <FastField name={'type'}>
-        label={' '}
+        {({ field, field: { value } }) => (
-        inline={true}
+          <FormGroup label={' '} inline={true} className={'form-group--active'}>
-        className={'form-group--active'}
-      >
             <Checkbox
               inline={true}
               label={<T id={'active'} />}
-          // defaultChecked={values.active}
+              defaultChecked={value}
-          // {...getFieldProps('active')}
+              {...field}
             />
           </FormGroup>
+        )}
+      </FastField>
     </div>
   );
 }
+
+// function areEqual(prevProps, nextProps) {
+//   return prevProps.isSubmitting === nextProps.isSubmitting;
+// }
+
+// export default memo(ItemFormFloatingActions, areEqual);

client/src/containers/Items/ItemFormInventorySection.js

@@ -1,30 +1,18 @@
 import React from 'react';
-import {
+import { Field, FastField, ErrorMessage } from 'formik';
-  FormGroup,
+import { FormGroup, Intent, InputGroup, Position } from '@blueprintjs/core';
-  Intent,
-  InputGroup,
-  Position,
-} from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
-import { AccountsSelectList, ErrorMessage, Col, Row, Hint } from 'components';
+import { AccountsSelectList, Col, Row, Hint } from 'components';
 import { CLASSES } from 'common/classes';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
 import withAccounts from 'containers/Accounts/withAccounts';
-import { compose, tansformDateValue, momentFormatter } from 'utils';
+import { compose, tansformDateValue, momentFormatter, inputIntent } from 'utils';
 
 /**
  * Item form inventory sections.
  */
-function ItemFormInventorySection({
+function ItemFormInventorySection({ accountsList }) {
-  errors,
-  touched,
-  setFieldValue,
-  values,
-  getFieldProps,
-
-  accountsList,
-}) {
   return (
     <div class="page-form__section page-form__section--inventory">
       <h3>
@@ -34,20 +22,13 @@ function ItemFormInventorySection({
       <Row>
         <Col xs={6}>
           {/*------------- Inventory account ------------- */}
+          <FastField name={'inventory_account_id'}>
+            {({ form, field: { value }, meta: { touched, error } }) => (
               <FormGroup
                 label={<T id={'inventory_account'} />}
                 inline={true}
-            intent={
+                intent={inputIntent({ error, touched })}
-              errors.inventory_account_id &&
+                helperText={<ErrorMessage name="inventory_account_id" />}
-              touched.inventory_account_id &&
-              Intent.DANGER
-            }
-            helperText={
-              <ErrorMessage
-                {...{ errors, touched }}
-                name="inventory_account_id"
-              />
-            }
                 className={classNames(
                   'form-group--item-inventory_account',
                   'form-group--select-list',
@@ -57,26 +38,34 @@ function ItemFormInventorySection({
                 <AccountsSelectList
                   accounts={accountsList}
                   onAccountSelected={(account) => {
-                setFieldValue('inventory_account_id', account.id);
+                    form.setFieldValue('inventory_account_id', account.id);
                   }}
                   defaultSelectText={<T id={'select_account'} />}
-              selectedAccountId={values.inventory_account_id}
+                  selectedAccountId={value}
                 />
               </FormGroup>
+            )}
+          </FastField>
 
+          <FastField name={'opening_quantity'}>
+            {({ field, field: { value }, meta: { touched, error } }) => (
               <FormGroup
                 label={<T id={'opening_quantity'} />}
                 labelInfo={<Hint />}
                 className={'form-group--opening_quantity'}
+                intent={inputIntent({ error, touched })}
                 inline={true}
               >
                 <InputGroup
                   medium={true}
-              intent={errors.opening_quantity && Intent.DANGER}
+                  {...field}
-              {...getFieldProps('opening_quantity')}
                 />
               </FormGroup>
+            )}
+          </FastField>
 
+          <FastField name={'opening_date'}>
+            {({ form, field: { value }, meta: { touched, error } }) => (
               <FormGroup
                 label={<T id={'opening_date'} />}
                 labelInfo={<Hint />}
@@ -85,32 +74,39 @@ function ItemFormInventorySection({
                   'form-group--opening_date',
                   CLASSES.FILL,
                 )}
+                intent={inputIntent({ error, touched })}
                 inline={true}
               >
                 <DateInput
                   {...momentFormatter('YYYY/MM/DD')}
-              value={tansformDateValue(values.payment_date)}
+                  value={tansformDateValue(value)}
                   onChange={(value) => {
-                setFieldValue('opening_date', value);
+                    form.setFieldValue('opening_date', value);
                   }}
                   popoverProps={{ position: Position.BOTTOM, minimal: true }}
                 />
               </FormGroup>
+            )}
+          </FastField>
         </Col>
 
         <Col xs={6}>
+          <FastField name={'opening_average_rate'}>
+            {({ field, field: { value }, meta: { touched, error } }) => (
               <FormGroup
                 label={'Opening average rate'}
                 labelInfo={<Hint />}
                 className={'form-group--opening_average_rate'}
+                intent={inputIntent({ error, touched })}
                 inline={true}
               >
                 <InputGroup
                   medium={true}
-              intent={errors.opening_average_rate && Intent.DANGER}
+                  {...field}
-              {...getFieldProps('opening_average_rate')}
                 />
               </FormGroup>
+            )}
+          </FastField>
         </Col>
       </Row>
     </div>

client/src/containers/Items/ItemFormPrimarySection.js

@@ -7,12 +7,11 @@ import {
   Classes,
   Radio,
   Position,
-  Tooltip,
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
+import { ErrorMessage, FastField } from 'formik';
 import {
   CategoriesSelectList,
-  ErrorMessage,
   Hint,
   Col,
   Row,
@@ -24,111 +23,122 @@ import { CLASSES } from 'common/classes';
 import withItemCategories from 'containers/Items/withItemCategories';
 import withAccounts from 'containers/Accounts/withAccounts';
 
-import { compose, handleStringChange } from 'utils';
+import { compose, handleStringChange, inputIntent } from 'utils';
 
 /**
  * Item form primary section.
  */
 function ItemFormPrimarySection({
-  getFieldProps,
-  setFieldValue,
-  errors,
-  touched,
-  values,
-
   // #withItemCategories
   categoriesList,
 }) {
-
   const itemTypeHintContent = (
     <>
-      <div class="mb1"><strong>{'Service: '}</strong>{'Services that you provide to customers. '}</div>
+      <div class="mb1">
-      <div class="mb1"><strong>{'Inventory: '}</strong>{'Products you buy and/or sell and that you track quantities of.'}</div>
+        <strong>{'Service: '}</strong>
-      <div class="mb1"><strong>{'Non-Inventory: '}</strong>{'Products you buy and/or sell but don’t need to (or can’t) track quantities of, for example, nuts and bolts used in an installation.'}</div>
+        {'Services that you provide to customers. '}
-    </>);
+      </div>
+      <div class="mb1">
+        <strong>{'Inventory: '}</strong>
+        {'Products you buy and/or sell and that you track quantities of.'}
+      </div>
+      <div class="mb1">
+        <strong>{'Non-Inventory: '}</strong>
+        {
+          'Products you buy and/or sell but don’t need to (or can’t) track quantities of, for example, nuts and bolts used in an installation.'
+        }
+      </div>
+    </>
+  );
 
   return (
     <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
       <Row>
         <Col xs={7}>
           {/*----------- Item type ----------*/}
+          <FastField name={'type'}>
+            {({ form, field: { value }, meta: { touched, error } }) => (
               <FormGroup
                 medium={true}
                 label={<T id={'item_type'} />}
                 labelInfo={
                   <span>
                     <FieldRequiredHint />
-                <Hint content={itemTypeHintContent} position={Position.BOTTOM_LEFT} />
+                    <Hint
+                      content={itemTypeHintContent}
+                      position={Position.BOTTOM_LEFT}
+                    />
                   </span>
                 }
                 className={'form-group--item-type'}
-            intent={errors.type && touched.type && Intent.DANGER}
+                intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage {...{ errors, touched }} name="type" />}
+                helperText={<ErrorMessage name="item_type" />}
                 inline={true}
               >
                 <RadioGroup
                   inline={true}
-              onChange={handleStringChange((value) => {
+                  onChange={handleStringChange((_value) => {
-                setFieldValue('type', value);
+                    form.setFieldValue('type', _value);
                   })}
-              selectedValue={values.type}
+                  selectedValue={value}
                 >
-              <Radio
+                  <Radio label={<T id={'service'} />} value="service" />
-                label={<T id={'service'} />}
+                  <Radio label={<T id={'inventory'} />} value="inventory" />
-                value="service"
-              />
-              <Radio
-                label={<T id={'inventory'} />}
-                value="inventory"
-              />
                   <Radio
                     label={<T id={'non_inventory'} />}
                     value="non-inventory"
                   />
                 </RadioGroup>
               </FormGroup>
+            )}
+          </FastField>
 
           {/*----------- Item name ----------*/}
+          <FastField name={'name'}>
+            {({ field, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'item_name'} />}
                 labelInfo={<FieldRequiredHint />}
                 className={'form-group--item-name'}
-            intent={errors.name && touched.name && Intent.DANGER}
+                intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage {...{ errors, touched }} name="name" />}
+                helperText={<ErrorMessage name={'name'} />}
                 inline={true}
               >
                 <InputGroup
                   medium={true}
-              intent={errors.name && touched.name && Intent.DANGER}
+                  {...field}
-              {...getFieldProps('name')}
                 />
               </FormGroup>
+            )}
+          </FastField>
 
           {/*----------- SKU ----------*/}
+          <FastField name={'code'}>
+            {({ field, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'item_code'} />}
                 labelInfo={<Hint />}
-            className={'form-group--item-sku'}
+                className={'  -group--item-sku'}
-            intent={errors.sku && touched.sku && Intent.DANGER}
+                intent={inputIntent({ error, touched })}
-            helperText={<ErrorMessage {...{ errors, touched }} name="sku" />}
+                helperText={<ErrorMessage name={'code'} />}
                 inline={true}
               >
                 <InputGroup
                   medium={true}
-              intent={errors.sku && touched.sku && Intent.DANGER}
+                  {...field}
-              {...getFieldProps('sku')}
                 />
               </FormGroup>
+            )}
+          </FastField>
 
           {/*----------- Item category ----------*/}
+          <FastField name={'type'}>
+            {({ form, field: { value }, meta: { error, touched } }) => (
               <FormGroup
                 label={<T id={'category'} />}
-            labelInfo={<Hint />}
                 inline={true}
-            intent={errors.category_id && touched.category_id && Intent.DANGER}
+                intent={inputIntent({ error, touched })}
-            helperText={
+                helperText={<ErrorMessage name="category_id" />}
-              <ErrorMessage {...{ errors, touched }} name="category" />
-            }
                 className={classNames(
                   'form-group--select-list',
                   'form-group--category',
@@ -137,13 +147,15 @@ function ItemFormPrimarySection({
               >
                 <CategoriesSelectList
                   categoriesList={categoriesList}
-              selecetedCategoryId={values.category_id}
+                  selecetedCategoryId={value}
                   onCategorySelected={(category) => {
-                setFieldValue('category_id', category.id);
+                    form.setFieldValue('category_id', category.id);
                   }}
                   popoverProps={{ minimal: true }}
                 />
               </FormGroup>
+            )}
+          </FastField>
         </Col>
 
         <Col xs={3}>

client/src/utils.js

@@ -1,5 +1,8 @@
 import moment from 'moment';
 import _ from 'lodash';
+import {
+  Intent,
+} from '@blueprintjs/core';
 import Currency from 'js-money/lib/currency';
 import PProgress from 'p-progress';
 import accounting from 'accounting';
@@ -285,3 +288,7 @@ export const transformToForm = (obj, emptyInitialValues) => {
     (val, key) => val !== null && Object.keys(emptyInitialValues).includes(key),
   )
 }
+
+export function inputIntent({ error, touched }){
+  return error && touched ? Intent.DANGER : '';
+}