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

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

@@ -1,4 +1,4 @@
-import { Button, DatePicker, Form, Input, Row, Col } from "antd";
+import { Button, Col, DatePicker, Form, Input, Row } from "antd";
 import moment from "moment";
 import React from "react";
 import { useTranslation } from "react-i18next";

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

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