STILL BROKEN: Refactored some forms to have bare functionality. Appears that v4 antd has extensive issues.

client/src/components/invoice-enter-modal/invoice-enter-modal.component.jsx

@@ -18,8 +18,8 @@ export default function InvoiceEnterModalComponent({
   visible,
   invoice,
   handleCancel,
-  handleSubmit,
-  form,
+  handleFinish,
+
   handleRoAutoComplete,
   handleRoSelect,
   roAutoCompleteOptions,
@@ -31,101 +31,109 @@ export default function InvoiceEnterModalComponent({
   vendor
 }) {
   const { t } = useTranslation();
-  const { getFieldDecorator, resetFields } = form;
+  const [form] = Form.useForm();
+  const { resetFields } = form;
+  //Default Values to be set in form.
+  // {getFieldDecorator("retail", { initialValue: jobLine.act_price })(
+  //   initialValue: jobLine.act_price * (discount ? 1 - discount : 1)
 
   return (
-    <Modal
-      title={
-        invoice && invoice.id
-          ? t("invoices.labels.edit")
-          : t("invoices.labels.new")
-      }
-      width={"90%"}
-      visible={visible}
-      okText={t("general.labels.save")}
-      onOk={handleSubmit}
-      okButtonProps={{ htmlType: "submit" }}
-      onCancel={handleCancel}
-      destroyOnClose
-    >
-      <Form onSubmit={handleSubmit} autoComplete={"off"}>
+    <Form onFinish={handleFinish} autoComplete={"off"} form={form}>
+      <Modal
+        title={
+          invoice && invoice.id
+            ? t("invoices.labels.edit")
+            : t("invoices.labels.new")
+        }
+        width={"90%"}
+        visible={visible}
+        okText={t("general.labels.save")}
+        onOk={handleFinish}
+        okButtonProps={{ htmlType: "submit" }}
+        onCancel={handleCancel}
+      >
         <div style={{ display: "flex" }}>
-          <Form.Item label={t("invoices.fields.ro_number")}>
-            {getFieldDecorator("jobid", {
-              rules: [
-                {
-                  required: true,
-                  pattern: new RegExp(
-                    "[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
-                  ),
-                  message: t("invoices.errors.invalidro")
-                }
-              ]
-            })(
-              <AutoComplete
-                name="ro_number"
-                dataSource={roAutoCompleteOptions}
-                onSearch={handleRoAutoComplete}
-                autoFocus
-                style={{ width: "300px" }}
-                onSelect={handleRoSelect}
-                backfill
-              />
-            )}
+          <Form.Item
+            name="jobid"
+            label={t("invoices.fields.ro_number")}
+            rules={[
+              {
+                required: true,
+                pattern: new RegExp(
+                  "[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
+                ),
+                message: t("invoices.errors.invalidro")
+              }
+            ]}
+          >
+            <AutoComplete
+              options={roAutoCompleteOptions}
+              onSearch={handleRoAutoComplete}
+              autoFocus
+              style={{ width: "300px" }}
+              onSelect={handleRoSelect}
+              backfill
+            />
           </Form.Item>
-          <Form.Item label={t("invoices.fields.vendor")}>
-            {getFieldDecorator("vendorid", {
-              rules: [
-                {
-                  required: true,
-                  pattern: new RegExp(
-                    "[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
-                  ),
-                  message: t("invoices.errors.invalidvendor")
-                }
-              ]
-            })(
-              <AutoComplete
-                name="vendor_id"
-                dataSource={vendorAutoCompleteOptions}
-                onSelect={handleVendorSelect}
-                style={{ width: "300px" }}
-                onSearch={handleVendorAutoComplete}
-                backfill
-              />
-            )}
+          <Form.Item
+            label={t("invoices.fields.vendor")}
+            name="vendorid"
+            rules={[
+              {
+                required: true,
+                pattern: new RegExp(
+                  "[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}"
+                ),
+                message: t("invoices.errors.invalidvendor")
+              }
+            ]}
+          >
+            <AutoComplete
+              options={vendorAutoCompleteOptions}
+              onSelect={handleVendorSelect}
+              style={{ width: "300px" }}
+              onSearch={handleVendorAutoComplete}
+              backfill
+            />
           </Form.Item>
           <Button onClick={() => resetFields()}>
             {t("general.actions.reset")}
           </Button>
         </div>
         <div style={{ display: "flex" }}>
-          <Form.Item label={t("invoices.fields.invoice_number")}>
-            {getFieldDecorator("invoice_number", {
-              rules: [
-                { required: true, message: t("general.validation.required") }
-              ]
-            })(<Input name="invoice_number" />)}
+          <Form.Item
+            label={t("invoices.fields.invoice_number")}
+            name="invoice_number"
+            rule={[
+              { required: true, message: t("general.validation.required") }
+            ]}
+          >
+            <Input />
           </Form.Item>
-          <Form.Item label={t("invoices.fields.date")}>
-            {getFieldDecorator("date", {
-              rules: [
-                { required: true, message: t("general.validation.required") }
-              ]
-            })(<DatePicker name="date" />)}
+          <Form.Item
+            label={t("invoices.fields.date")}
+            name="date"
+            rule={[
+              { required: true, message: t("general.validation.required") }
+            ]}
+          >
+            <DatePicker />
           </Form.Item>
-          <Form.Item label={t("invoices.fields.is_credit_memo")}>
-            {getFieldDecorator("is_credit_memo", {
-              initialValue: false,
-              valuePropName: "checked"
-            })(<Switch name="is_credit_memo" />)}
+          <Form.Item
+            label={t("invoices.fields.is_credit_memo")}
+            name="is_credit_memo"
+            valuePropName="checked"
+          >
+            <Switch />
           </Form.Item>
-          <Form.Item label={t("invoices.fields.total")}>
-            {getFieldDecorator("total", {
-              rules: [
-                { required: true, message: t("general.validation.required") }
-              ]
-            })(<InputNumber precision={2} min={0} name="total" />)}
+          <Form.Item
+            label={t("invoices.fields.total")}
+            name="total"
+            rule={[
+              { required: true, message: t("general.validation.required") }
+            ]}
+          >
+            <InputNumber precision={2} min={0} />
           </Form.Item>
         </div>
         <Row>
@@ -140,7 +148,7 @@ export default function InvoiceEnterModalComponent({
           <Col span={12}>Table of added items.</Col>
         </Row>
         );
-      </Form>
-    </Modal>
+      </Modal>{" "}
+    </Form>
   );
 }