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

client/src/components/owner-detail-form/owner-detail-form.component.jsx

@@ -5,99 +5,77 @@ import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import FormItemPhone from "../form-items-formatted/phone-form-item.component";
 import ResetForm from "../form-items-formatted/reset-form-item.component";
 
-export default function OwnerDetailFormComponent({ form, owner }) {
+export default function OwnerDetailFormComponent({ form }) {
   const { t } = useTranslation();
-  const {
-    isFieldsTouched,
-    resetFields,
-    getFieldDecorator,
-    getFieldValue
-  } = form;
-
+  const { isFieldsTouched, resetFields, getFieldValue } = form;
+  console.log("isFieldsTouched([], true)", isFieldsTouched([], true));
   return (
     <div>
-      {isFieldsTouched() ? <ResetForm resetFields={resetFields} /> : null}
+      <button onClick={() => alert(getFieldValue("ownr_ea"))}>YY</button>
+      {isFieldsTouched([], true) ? (
+        <ResetForm resetFields={resetFields} />
+      ) : null}
       <Button type="primary" key="submit" htmlType="submit">
         {t("general.labels.save")}
       </Button>
       <Row>
         <Col span={8}>
-          <Form.Item label={t("owners.fields.ownr_ln")}>
-            {getFieldDecorator("ownr_ln", {
-              initialValue: owner.ownr_ln
-            })(<Input name="ownr_ln" />)}
+          <Form.Item label={t("owners.fields.ownr_ln")} name="ownr_ln">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("owners.fields.ownr_fn")}>
-            {getFieldDecorator("ownr_fn", {
-              initialValue: owner.ownr_fn
-            })(<Input name="ownr_fn" />)}
+          <Form.Item label={t("owners.fields.ownr_fn")} name="ownr_fn">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("owners.fields.allow_text_message")}>
-            {getFieldDecorator("allow_text_message", {
-              initialValue: owner.allow_text_message,
-              valuePropName: "checked"
-            })(<Switch name="allow_text_message" />)}
+          <Form.Item
+            label={t("owners.fields.allow_text_message")}
+            name="allow_text_message"
+            valuePropName="checked"
+          >
+            <Switch />
           </Form.Item>
-          <Form.Item label={t("owners.fields.ownr_addr1")}>
-            {getFieldDecorator("ownr_addr1", {
-              initialValue: owner.ownr_addr1
-            })(<Input name="ownr_addr1" />)}
+          <Form.Item label={t("owners.fields.ownr_addr1")} name="ownr_addr1">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("owners.fields.ownr_addr2")}>
-            {getFieldDecorator("ownr_addr2", {
-              initialValue: owner.ownr_addr2
-            })(<Input name="ownr_addr2" />)}
+          <Form.Item label={t("owners.fields.ownr_addr2")} name="ownr_addr2">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("owners.fields.ownr_city")}>
-            {getFieldDecorator("ownr_city", {
-              initialValue: owner.ownr_city
-            })(<Input name="ownr_city" />)}
+          <Form.Item label={t("owners.fields.ownr_city")} name="ownr_city">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("owners.fields.ownr_ctry")}>
-            {getFieldDecorator("ownr_ctry", {
-              initialValue: owner.ownr_ctry
-            })(<Input name="ownr_ctry" />)}
+          <Form.Item label={t("owners.fields.ownr_ctry")} name="ownr_ctry">
+            <Input />
           </Form.Item>
         </Col>
         <Col span={8}>
-          {" "}
-          <Form.Item label={t("owners.fields.ownr_ea")}>
-            {getFieldDecorator("ownr_ea", {
-              initialValue: owner.ownr_ea,
-              rules: [
-                {
-                  type: "email",
-                  message: "This is not a valid email address."
-                }
-              ]
-            })(
-              <FormItemEmail name="ownr_ea" email={getFieldValue("ownr_ea")} />
-            )}
+          <Form.Item
+            label={t("owners.fields.ownr_ea")}
+            name="ownr_ea"
+            rules={[
+              {
+                type: "email",
+                message: "This is not a valid email address."
+              }
+            ]}
+          >
+            <FormItemEmail email={getFieldValue("ownr_ea")} />
           </Form.Item>
-          <Form.Item label={t("owners.fields.ownr_ph1")}>
-            {getFieldDecorator("ownr_ph1", {
-              initialValue: owner.ownr_ph1
-            })(<FormItemPhone customInput={Input} name="ownr_ph1" />)}
+          <Form.Item label={t("owners.fields.ownr_ph1")} name="ownr_ph1">
+            <FormItemPhone customInput={Input} />
           </Form.Item>
-          <Form.Item label={t("owners.fields.ownr_st")}>
-            {getFieldDecorator("ownr_st", {
-              initialValue: owner.ownr_st
-            })(<Input name="ownr_st" />)}
+          <Form.Item label={t("owners.fields.ownr_st")} name="ownr_st">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("owners.fields.ownr_zip")}>
-            {getFieldDecorator("ownr_zip", {
-              initialValue: owner.ownr_zip
-            })(<Input name="ownr_zip" />)}
+          <Form.Item label={t("owners.fields.ownr_zip")} name="ownr_zip">
+            <Input />
           </Form.Item>
-          <Form.Item label={t("owners.fields.preferred_contact")}>
-            {getFieldDecorator("preferred_contact", {
-              initialValue: owner.preferred_contact
-            })(<Input name="preferred_contact" />)}
+          <Form.Item
+            label={t("owners.fields.preferred_contact")}
+            name="preferred_contact"
+          >
+            <Input />
           </Form.Item>
-          <Form.Item label={t("owners.fields.ownr_title")}>
-            {getFieldDecorator("ownr_title", {
-              initialValue: owner.ownr_title
-            })(<Input name="ownr_title" />)}
+          <Form.Item label={t("owners.fields.ownr_title")} name="ownr_title">
+            <Input />
           </Form.Item>
         </Col>
       </Row>

client/src/components/owner-detail-form/owner-detail-form.container.jsx

@@ -5,42 +5,34 @@ import { useTranslation } from "react-i18next";
 import { UPDATE_OWNER } from "../../graphql/owners.queries";
 import OwnerDetailFormComponent from "./owner-detail-form.component";
 
-function OwnerDetailFormContainer({ form, owner, refetch }) {
+function OwnerDetailFormContainer({ owner, refetch }) {
   const { t } = useTranslation();
+  const [form] = Form.useForm();
 
   const [updateOwner] = useMutation(UPDATE_OWNER);
 
-  const handleSubmit = e => {
-    e.preventDefault();
-
-    form.validateFieldsAndScroll((err, values) => {
-      if (err) {
-        notification["error"]({
-          message: t("owners.errors.validationtitle"),
-          description: t("owners.errors.validation")
-        });
-      }
-      if (!err) {
-        updateOwner({
-          variables: { ownerId: owner.id, owner: values }
-        }).then(r => {
-          notification["success"]({
-            message: t("owners.successes.save")
-          });
-          //TODO Better way to reset the field decorators?
-          if (refetch) refetch().then();
-          form.resetFields();
-        });
-      }
+  const handleFinish = values => {
+    updateOwner({
+      variables: { ownerId: owner.id, owner: values }
+    }).then(r => {
+      notification["success"]({
+        message: t("owners.successes.save")
+      });
+      //TODO Better way to reset the field decorators?
+      if (refetch) refetch().then();
+      // resetFields();
     });
   };
 
   return (
-    <Form onSubmit={handleSubmit} autoComplete="off">
-      <OwnerDetailFormComponent form={form} owner={owner} />
+    <Form
+      form={form}
+      onFinish={handleFinish}
+      autoComplete="off"
+      initialValues={owner}
+    >
+      <OwnerDetailFormComponent form={form} />
     </Form>
   );
 }
-export default Form.create({ name: "OwnerDetailFormContainer" })(
-  OwnerDetailFormContainer
-);
+export default OwnerDetailFormContainer;