diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx
index 83f55cc23..eb0e3e0ba 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormDialogs.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React from 'react';
-import InvoiceNumberDialog from '@/containers/Dialogs/InvoiceNumberDialog';
 import { useFormikContext } from 'formik';
+import InvoiceNumberDialog from '@/containers/Dialogs/InvoiceNumberDialog';
 import { DialogsName } from '@/constants/dialogs';
 
 /**
@@ -12,8 +12,14 @@ export default function InvoiceFormDialogs() {
 
   // Update the form once the invoice number form submit confirm.
   const handleInvoiceNumberFormConfirm = (settings) => {
+    // Set the invoice transaction no. that cames from dialog to the form.
+    // the `invoice_no_manually` will be empty except the increment mode is not auto.
     setFieldValue('invoice_no', settings.transactionNumber);
-    setFieldValue('invoice_no_manually', settings.transactionNumber);
+    setFieldValue('invoice_no_manually', '');
+
+    if (settings.incrementMode !== 'auto') {
+      setFieldValue('invoice_no_manually', settings.transactionNumber);
+    }
   };
 
   return (
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
index eda324079..1fd9b5317 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.tsx
@@ -77,7 +77,9 @@ const InvoiceFormInvoiceNumberField = R.compose(
     const handleInvoiceNoBlur = (event) => {
       const newValue = event.target.value;
 
-      if (values.invoice_no.value !== newValue && invoiceAutoIncrement) {
+      // Show the confirmation dialog if the value has changed and auto-increment
+      // mode is enabled.
+      if (values.invoice_no !== newValue && invoiceAutoIncrement) {
         openDialog(DialogsName.InvoiceNumberSettings, {
           initialFormValues: {
             onceManualNumber: newValue,
@@ -85,6 +87,8 @@ const InvoiceFormInvoiceNumberField = R.compose(
           },
         });
       }
+      // Setting the invoice number to the form will be manually in case
+      // auto-increment is disable.
       if (!invoiceAutoIncrement) {
         setFieldValue('invoice_no', newValue);
         setFieldValue('invoice_no_manually', newValue);
@@ -105,7 +109,7 @@ const InvoiceFormInvoiceNumberField = R.compose(
             minimal={true}
             asyncControl={true}
             onBlur={handleInvoiceNoBlur}
-            fastField={true}
+            onChange={() => {}}
           />
           <InputPrependButton
             buttonProps={{
@@ -123,6 +127,7 @@ const InvoiceFormInvoiceNumberField = R.compose(
     );
   },
 );
+InvoiceFormInvoiceNumberField.displayName = 'InvoiceFormInvoiceNumberField';
 
 /**
  * Invoice form header fields.
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/components.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/components.tsx
index d0e6ff363..0020a7e8d 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/components.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/components.tsx
@@ -55,11 +55,13 @@ export const InvoiceNoSyncSettingsToForm = R.compose(
   const { setFieldValue } = useFormikContext();
 
   useUpdateEffect(() => {
-    // Do not update if the invoice auto-increment is disabled.
+    // Do not update if the invoice auto-increment mode is disabled.
     if (!invoiceAutoIncrement) return null;
 
-    const invoiceNo = transactionNumber(invoiceNumberPrefix, invoiceNextNumber);
-    setFieldValue('invoice_no', invoiceNo);
+    setFieldValue(
+      'invoice_no',
+      transactionNumber(invoiceNumberPrefix, invoiceNextNumber),
+    );
   }, [setFieldValue, invoiceNumberPrefix, invoiceNextNumber]);
 
   return null;
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
index 0590bdd78..8c2f6a04f 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/utils.tsx
@@ -43,7 +43,7 @@ export const defaultInvoice = {
   due_date: moment().format('YYYY-MM-DD'),
   delivered: '',
   invoice_no: '',
-  invoice_no_manually: false,
+  invoice_no_manually: '',
   reference_no: '',
   invoice_message: '',
   terms_conditions: '',
@@ -154,6 +154,8 @@ export function transformValueToRequest(values) {
   );
   return {
     ...omit(values, ['invoice_no', 'invoice_no_manually']),
+    // The `invoice_no_manually` will be presented just in case the auto-increment
+    // is disable, always both attributes hold the same value in manual mode.
     ...(values.invoice_no_manually && {
       invoice_no: values.invoice_no,
     }),