fix: input prepend button.

client/src/containers/Sales/Estimate/EstimateFormHeader.js

@@ -6,6 +6,7 @@ import {
   Position,
   MenuItem,
   Classes,
+  ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
@@ -168,12 +169,17 @@ function EstimateFormHeader({
             <ErrorMessage name="estimate_number" {...{ errors, touched }} />
           }
         >
+          <ControlGroup fill={true}>
             <InputGroup
               intent={
-              errors.estimate_number && touched.estimate_number && Intent.DANGER
+                errors.estimate_number &&
+                touched.estimate_number &&
+                Intent.DANGER
               }
               minimal={true}
-            rightElement={
+              {...getFieldProps('estimate_number')}
+              onBlur={handleEstimateNumberChanged}
+            />
             <InputPrependButton
               buttonProps={{
                 onClick: handleEstimateNumberChange,
@@ -185,10 +191,7 @@ function EstimateFormHeader({
                 position: Position.BOTTOM_LEFT,
               }}
             />
-            }
+          </ControlGroup>
-            {...getFieldProps('estimate_number')}
-            onBlur={handleEstimateNumberChanged}
-          />
         </FormGroup>
 
         {/* ----------- Reference ----------- */}

client/src/containers/Sales/Invoice/InvoiceFormHeader.js

@@ -4,7 +4,7 @@ import {
   InputGroup,
   Intent,
   Position,
-  MenuItem,
+  ControlGroup,
 } from '@blueprintjs/core';
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
@@ -151,10 +151,13 @@ function InvoiceFormHeader({
             <ErrorMessage name="invoice_no" {...{ errors, touched }} />
           }
         >
+          <ControlGroup fill={true}>
             <InputGroup
               intent={errors.invoice_no && touched.invoice_no && Intent.DANGER}
               minimal={true}
-            rightElement={
+              {...getFieldProps('invoice_no')}
+              onBlur={handleInvoiceNumberChanged}
+            />
             <InputPrependButton
               buttonProps={{
                 onClick: handleInvoiceNumberChange,
@@ -166,10 +169,7 @@ function InvoiceFormHeader({
                 position: Position.BOTTOM_LEFT,
               }}
             />
-            }
+          </ControlGroup>
-            {...getFieldProps('invoice_no')}
-            onBlur={handleInvoiceNumberChanged}
-          />
         </FormGroup>
 
         {/* ----------- Reference ----------- */}

client/src/containers/Sales/PaymentReceive/PaymentReceiveFormHeader.js

@@ -4,7 +4,7 @@ import {
   InputGroup,
   Intent,
   Position,
-  MenuItem,
+  ControlGroup,
 } from '@blueprintjs/core';
 
 import { DateInput } from '@blueprintjs/datetime';
@@ -186,6 +186,7 @@ function PaymentReceiveFormHeader({
               />
             }
           >
+            <ControlGroup fill={true}>
               <InputGroup
                 intent={
                   errors.payment_receive_no &&
@@ -193,7 +194,9 @@ function PaymentReceiveFormHeader({
                   Intent.DANGER
                 }
                 minimal={true}
-              rightElement={
+                {...getFieldProps('payment_receive_no')}
+                onBlur={handlePaymentReceiveNumberChanged}
+              />
               <InputPrependButton
                 buttonProps={{
                   onClick: handlePaymentReceiveNumberChange,
@@ -201,15 +204,11 @@ function PaymentReceiveFormHeader({
                 }}
                 tooltip={true}
                 tooltipProps={{
-                    content:
+                  content: 'Setting your auto-generated Payment Receive number',
-                      'Setting your auto-generated Payment Receive number',
                   position: Position.BOTTOM_LEFT,
                 }}
               />
-              }
+            </ControlGroup>
-              {...getFieldProps('payment_receive_no')}
-              onBlur={handlePaymentReceiveNumberChanged}
-            />
           </FormGroup>
 
           {/* ------------ Deposit account ------------ */}

client/src/containers/Sales/Receipt/ReceiptForm.js

@@ -9,7 +9,7 @@ import React, {
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import moment from 'moment';
-import { Intent, FormGroup, TextArea } from '@blueprintjs/core';
+import { Intent, FormGroup, TextArea, ControlGroup } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { pick, sumBy } from 'lodash';
 import classNames from 'classnames';

client/src/containers/Sales/Receipt/ReceiptFormHeader.js

@@ -1,5 +1,11 @@
 import React, { useMemo, useCallback, useState } from 'react';
-import { FormGroup, InputGroup, Intent, Position } from '@blueprintjs/core';
+import {
+  FormGroup,
+  InputGroup,
+  Intent,
+  Position,
+  ControlGroup,
+} from '@blueprintjs/core';
 
 import { DateInput } from '@blueprintjs/datetime';
 import { FormattedMessage as T } from 'react-intl';
@@ -153,12 +159,15 @@ function ReceiptFormHeader({
             <ErrorMessage name="receipt_number" {...{ errors, touched }} />
           }
         >
+          <ControlGroup fill={true}>
             <InputGroup
               intent={
                 errors.receipt_number && touched.receipt_number && Intent.DANGER
               }
               minimal={true}
-            rightElement={
+              {...getFieldProps('receipt_number')}
+              onBlur={handleReceiptNumberChanged}
+            />
             <InputPrependButton
               buttonProps={{
                 onClick: handleReceiptNumberChange,
@@ -170,10 +179,7 @@ function ReceiptFormHeader({
                 position: Position.BOTTOM_LEFT,
               }}
             />
-            }
+          </ControlGroup>
-            {...getFieldProps('receipt_number')}
-            onBlur={handleReceiptNumberChanged}
-          />
         </FormGroup>
 
         {/* ----------- Reference ----------- */}

client/src/style/objects/form.scss

@@ -344,20 +344,14 @@ $form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='ht
   color: #4b5d6b;
 }
 
-.bp3-input-group{
+.bp3-control-group{
-  display: flex;
-
-  .bp3-input:not(:last-child) {
-    border-radius: 3px 0 0 3px;
-    border-right-width: 0;
-  }
-
-  .bp3-input-action{
-    position: relative;
-  }
 
   .input-prepend{
 
+    &:not(.bp3-fixed){
+      flex: 0;
+    }
+
     &__text,
     &__button{
       display: flex;

client/src/style/pages/customer.scss

@@ -16,6 +16,11 @@
   .bp3-form-group{
     max-width: 500px;
 
+    .bp3-control{
+      margin-top: 8px;
+      margin-bottom: 8px;
+    }
+
     &.bp3-inline{
 
       .bp3-label{