fix(webapp): customer/vendor select should update deps

packages/webapp/src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.tsx

@@ -140,7 +140,8 @@ function ExpenseFormCustomerSelect() {
       labelInfo={<Hint />}
       inline={true}
       name={'customer_id'}
-      customers={customers}
+      fastField={true}
+      shouldUpdateDeps={{ items: customers }}
       shouldUpdate={customersFieldShouldUpdate}
     >
       <CustomersSelect
@@ -149,6 +150,9 @@ function ExpenseFormCustomerSelect() {
         placeholder={<T id={'select_customer_account'} />}
         allowCreate={true}
         popoverFill={true}
+        fastField={true}
+        shouldUpdateDeps={{ items: customers }}
+        shouldUpdate={customersFieldShouldUpdate}
       />
     </FormGroup>
   );

packages/webapp/src/containers/Expenses/ExpenseForm/utils.tsx

@@ -104,7 +104,7 @@ export const transformToEditForm = (
  */
 export const customersFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };

packages/webapp/src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.tsx

@@ -2,12 +2,12 @@
 import React from 'react';
 import styled from 'styled-components';
 import classNames from 'classnames';
-import { FormGroup, InputGroup, Classes, Position } from '@blueprintjs/core';
 import { FastField, ErrorMessage, useFormikContext } from 'formik';
+import { FormGroup, InputGroup, Classes, Position } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
+
 import { FeatureCan, FormattedMessage as T } from '@/components';
 import { CLASSES } from '@/constants/classes';
-
 import {
   FFormGroup,
   FieldRequiredHint,
@@ -168,9 +168,9 @@ function BillFormVendorField() {
       label={<T id={'vendor_name'} />}
       inline={true}
       labelInfo={<FieldRequiredHint />}
-      vendors={vendors}
       fastField={true}
       shouldUpdate={vendorsFieldShouldUpdate}
+      shouldUpdateDeps={{ items: vendors }}
     >
       <VendorsSelect
         name={'vendor_id'}
@@ -181,6 +181,9 @@ function BillFormVendorField() {
           setFieldValue('currency_code', contact?.currency_code);
         }}
         allowCreate={true}
+        fastField={true}
+        shouldUpdate={vendorsFieldShouldUpdate}
+        shouldUpdateDeps={{ items: vendors }}
       />
       {values.vendor_id && (
         <VendorButtonLink vendorId={values.vendor_id}>

packages/webapp/src/containers/Purchases/Bills/BillForm/utils.tsx

@@ -19,7 +19,10 @@ import {
   ensureEntriesHaveEmptyLine,
 } from '@/containers/Entries/utils';
 import { useCurrentOrganization } from '@/hooks/state';
-import { isLandedCostDisabled, getEntriesTotal } from '@/containers/Entries/utils';
+import {
+  isLandedCostDisabled,
+  getEntriesTotal,
+} from '@/containers/Entries/utils';
 import { useBillFormContext } from './BillFormProvider';
 
 export const MIN_LINES_NUMBER = 1;
@@ -153,7 +156,7 @@ export const handleDeleteErrors = (errors) => {
  */
 export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.vendors !== oldProps.vendors ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/VendorCreditNoteFormHeaderFields.tsx

@@ -185,9 +185,10 @@ function VendorCreditFormVendorSelect() {
       name={'vendor_id'}
       label={<T id={'vendor_name'} />}
       inline={true}
-      vendors={vendors}
-      shouldUpdate={vendorsFieldShouldUpdate}
       labelInfo={<FieldRequiredHint />}
+      fastField={true}
+      shouldUpdate={vendorsFieldShouldUpdate}
+      shouldUpdateDeps={{ items: vendors }}
     >
       <VendorsSelect
         name={'vendor_id'}
@@ -199,6 +200,9 @@ function VendorCreditFormVendorSelect() {
         }}
         popoverFill={true}
         allowCreate={true}
+        fastField={true}
+        shouldUpdate={vendorsFieldShouldUpdate}
+        shouldUpdateDeps={{ items: vendors }}
       />
       {values.vendor_id && (
         <VendorButtonLink vendorId={values.vendor_id}>

packages/webapp/src/containers/Purchases/CreditNotes/CreditNoteForm/utils.tsx

@@ -113,7 +113,7 @@ export const transformFormValuesToRequest = (values) => {
  */
 export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.vendors !== oldProps.vendors ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.tsx

@@ -238,10 +238,11 @@ function PaymentFormVendorSelect() {
     <FFormGroup
       name={'vendor_id'}
       label={<T id={'vendor_name'} />}
-      inline={true}
       labelInfo={<FieldRequiredHint />}
-      vendors={vendors}
+      inline={true}
+      fastField={true}
       shouldUpdate={vendorsFieldShouldUpdate}
+      shouldUpdateDeps={{ items: vendors }}
     >
       <VendorsSelect
         name={'vendor_id'}
@@ -254,6 +255,9 @@ function PaymentFormVendorSelect() {
         }}
         disabled={!isNewMode}
         allowCreate={true}
+        fastField={true}
+        shouldUpdate={vendorsFieldShouldUpdate}
+        shouldUpdateDeps={{ items: vendors }}
       />
       {values.vendor_id && (
         <VendorButtonLink vendorId={values.vendor_id}>

packages/webapp/src/containers/Purchases/PaymentMades/PaymentForm/utils.tsx

@@ -74,7 +74,7 @@ export const transformToNewPageEntries = (entries) => {
  */
 export const vendorsFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.vendors !== oldProps.vendors ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFormHeaderFields.tsx

@@ -191,11 +191,11 @@ function CreditNoteCustomersSelect() {
     <FFormGroup
       name={'customer_id'}
       label={<T id={'customer_name'} />}
-      customers={customers}
       labelInfo={<FieldRequiredHint />}
       inline={true}
       fastField={true}
       shouldUpdate={customerNameFieldShouldUpdate}
+      shouldUpdateDeps={{ items: customers }}
     >
       <CustomersSelect
         name={'customer_id'}
@@ -207,6 +207,9 @@ function CreditNoteCustomersSelect() {
         }}
         popoverFill={true}
         allowCreate={true}
+        fastField={true}
+        shouldUpdate={customerNameFieldShouldUpdate}
+        shouldUpdateDeps={{ items: customers }}
       />
       {values.customer_id && (
         <CustomerButtonLink customerId={values.customer_id}>

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/utils.tsx

@@ -116,7 +116,7 @@ export const transformFormValuesToRequest = (values) => {
  */
 export const customerNameFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.tsx

@@ -244,9 +244,9 @@ function EstimateFormCustomerSelect() {
       inline={true}
       labelInfo={<FieldRequiredHint />}
       name={'customer_id'}
-      customers={customers}
-      shouldUpdate={customersFieldShouldUpdate}
       fastField={true}
+      shouldUpdate={customersFieldShouldUpdate}
+      shouldUpdateDeps={{ items: customers }}
     >
       <CustomersSelect
         name={'customer_id'}
@@ -259,6 +259,8 @@ function EstimateFormCustomerSelect() {
         popoverFill={true}
         allowCreate={true}
         fastField={true}
+        shouldUpdate={customersFieldShouldUpdate}
+        shouldUpdateDeps={{ items: customers }}
       />
       {values.customer_id && (
         <CustomerButtonLink customerId={values.customer_id}>

packages/webapp/src/containers/Sales/Estimates/EstimateForm/utils.tsx

@@ -80,7 +80,7 @@ export const transformToEditForm = (estimate) => {
  */
 export const customersFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx

@@ -259,12 +259,12 @@ function InvoiceFormCustomerSelect() {
   return (
     <FFormGroup
       name={'customer_id'}
-      customers={customers}
-      shouldUpdate={customerNameFieldShouldUpdate}
       label={<T id={'customer_name'} />}
       inline={true}
       labelInfo={<FieldRequiredHint />}
       fastField={true}
+      shouldUpdate={customerNameFieldShouldUpdate}
+      shouldUpdateDeps={{ items: customers }}
     >
       <CustomersSelect
         name={'customer_id'}
@@ -276,6 +276,8 @@ function InvoiceFormCustomerSelect() {
         }}
         allowCreate={true}
         fastField={true}
+        shouldUpdate={customerNameFieldShouldUpdate}
+        shouldUpdateDeps={{ items: customers }}
       />
       {values.customer_id && (
         <CustomerButtonLink customerId={values.customer_id}>

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx

@@ -114,7 +114,7 @@ export const transformErrors = (errors, { setErrors }) => {
  */
 export const customerNameFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.tsx

@@ -341,9 +341,9 @@ function PaymentReceiveCustomerSelect() {
       inline={true}
       labelInfo={<FieldRequiredHint />}
       name={'customer_id'}
-      customers={customers}
       fastField={true}
       shouldUpdate={customersFieldShouldUpdate}
+      shouldUpdateDeps={{ items: customers }}
     >
       <CustomersSelect
         name={'customer_id'}
@@ -358,6 +358,8 @@ function PaymentReceiveCustomerSelect() {
         disabled={!isNewMode}
         allowCreate={true}
         fastField={true}
+        shouldUpdate={customersFieldShouldUpdate}
+        shouldUpdateDeps={{ items: customers }}
       />
       {values.customer_id && (
         <CustomerButtonLink customerId={values.customer_id}>

packages/webapp/src/containers/Sales/PaymentReceives/PaymentReceiveForm/utils.tsx

@@ -129,7 +129,7 @@ export const fullAmountPaymentEntries = (entries) => {
  */
 export const customersFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.tsx

@@ -245,11 +245,11 @@ function ReceiptFormCustomerSelect() {
     <FFormGroup
       name={'customer_id'}
       label={<T id={'customer_name'} />}
-      inline={true}
       labelInfo={<FieldRequiredHint />}
-      customers={customers}
+      inline={true}
       fastField={true}
       shouldUpdate={customersFieldShouldUpdate}
+      shouldUpdateDeps={{ items: customers }}
     >
       <CustomersSelect
         name={'customer_id'}
@@ -261,6 +261,9 @@ function ReceiptFormCustomerSelect() {
         }}
         popoverFill={true}
         allowCreate={true}
+        fastField={true}
+        shouldUpdate={customersFieldShouldUpdate}
+        shouldUpdateDeps={{ items: customers }}
       />
       {values.customer_id && (
         <CustomerButtonLink customerId={values.customer_id}>

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/utils.tsx

@@ -104,7 +104,7 @@ export const accountsFieldShouldUpdate = (newProps, oldProps) => {
  */
 export const customersFieldShouldUpdate = (newProps, oldProps) => {
   return (
-    newProps.customers !== oldProps.customers ||
+    newProps.shouldUpdateDeps.items !== oldProps.shouldUpdateDeps.items ||
     defaultFastFieldShouldUpdate(newProps, oldProps)
   );
 };