From 5cdb022594619f6abc21d525d1ca44a855060bbd Mon Sep 17 00:00:00 2001
From: Guillermo Espinosa <juan.gmo1997@gmail.com>
Date: Thu, 10 Oct 2024 15:08:44 -0300
Subject: [PATCH] formComponent fix

---
 packages/ui/package.json                |  2 +-
 packages/ui/src/FormComponents/index.js | 78 ++++++++++++++-----------
 2 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/packages/ui/package.json b/packages/ui/package.json
index d9d8c91e..633ab71c 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.5.23-beta.20",
+  "version": "0.5.23-beta.21",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
diff --git a/packages/ui/src/FormComponents/index.js b/packages/ui/src/FormComponents/index.js
index bf6b14e8..6d57ee86 100644
--- a/packages/ui/src/FormComponents/index.js
+++ b/packages/ui/src/FormComponents/index.js
@@ -2,7 +2,7 @@ import classNames from "classnames";
 import { SketchPicker } from "react-color";
 import { isNumber, noop, kebabCase, isPlainObject, isEqual } from "lodash-es";
 import mathExpressionEvaluator from "math-expression-evaluator";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { Field, change } from "redux-form";
 import "./style.css";
 import {
@@ -162,8 +162,7 @@ const AbstractInput = ({
       onDefaultValChanged && onDefaultValChanged(defaultValue, name, form);
       onFieldSubmit && onFieldSubmit(defaultValue);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultValue]);
+  }, [defaultValue, dispatch, form, name, onDefaultValChanged, onFieldSubmit]);
 
   // if our custom field level validation is happening then we don't want to show the error visually
   const showError =
@@ -975,35 +974,29 @@ export function generateField(component, opts) {
     // asyncValidate,
     ...rest
   }) => {
-    const component = compWithDefaultVal;
-
+    const input = useMemo(() => {
+      if (noRedux)
+        return {
+          input: {
+            onChange: rest.onChange || noop,
+            onBlur: rest.onBlur || noop,
+            value: rest.value,
+            name
+          }
+        };
+      return {};
+    }, [name, noRedux, rest.onBlur, rest.onChange, rest.value]);
     const props = {
       onFieldSubmit,
       name,
-      ...(noRedux && {
-        input: {
-          onChange: rest.onChange || noop,
-          onBlur: rest.onBlur || noop,
-          value: rest.value,
-          name
-        }
-      }),
-      component,
+      ...input,
+      component: compWithDefaultVal,
       ...(isRequired && { validate: fieldRequired }),
       isRequired,
       noRedux,
       ...rest
     };
 
-    // if (asyncValidate) {
-    //   props = {
-    //     ...props,
-    //     asyncValidate,
-    //     component: WrappedAddAsyncValidate,
-    //     passedComponent: component
-    //   };
-    // }
-
     return <Field {...props} />;
   };
 }
@@ -1131,20 +1124,35 @@ export const withAbstractWrapper = (ComponentToWrap, opts = {}) => {
       triggerGetDefault();
     }, [generateDefaultValue || {}]);
     // const asyncValidating = props.asyncValidating;
-    const defaultProps = {
-      ...rest,
-      defaultValue: defaultValueFromBackend || defaultValueFromProps,
-      disabled: props.disabled || allowUserOverride === false,
-      readOnly: props.readOnly || isLoadingDefaultValue,
-      intent: getIntent({
-        showErrorIfUntouched,
-        meta: { touched, error, warning }
+    const defaultProps = useMemo(
+      () => ({
+        ...rest,
+        defaultValue: defaultValueFromBackend || defaultValueFromProps,
+        disabled: props.disabled || allowUserOverride === false,
+        readOnly: props.readOnly || isLoadingDefaultValue,
+        intent: getIntent({
+          showErrorIfUntouched,
+          meta: { touched, error, warning }
+        }),
+        intentClass: getIntentClass({
+          showErrorIfUntouched,
+          meta: { touched, error, warning }
+        })
       }),
-      intentClass: getIntentClass({
+      [
+        allowUserOverride,
+        defaultValueFromBackend,
+        defaultValueFromProps,
+        error,
+        isLoadingDefaultValue,
+        props.disabled,
+        props.readOnly,
+        rest,
         showErrorIfUntouched,
-        meta: { touched, error, warning }
-      })
-    };
+        touched,
+        warning
+      ]
+    );
 
     // don't show intent while async validating
     // if (asyncValidating) {