react-form-manage 1.0.8-beta.18 → 1.0.8-beta.20

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.0.8-beta.19] - 2026-02-02
+
+### Features
+- Trigger `initied` flag for onChange in `useFormItemControl` to properly mark form items as initialized
+
+## [1.0.8-beta.18] - 2026-02-01
+
+### Features
+- Avoid deep traversal into class instances/functions in path collection
+- `getAllNoneObjStringPath` now skips non-plain objects and functions, only traverses arrays and plain objects
+- Improves performance and prevents accidental property access on class instances
+
 ## [1.0.8-beta.17] - 2026-02-01
 
 ### Features

package/dist/hooks/useFormItemControl.js

@@ -8,14 +8,22 @@ import { useFormStore } from "../stores/formStore";
 const VALID_PREMITIVE_TYPE = ["string", "number", "undefined"];
 function useFormItemControl({ formName, form, name, initialValue, formItemId, rules, elementRef }) {
   const contextForm = useFormContext();
-  const { value, setData, getCacheData, getFormValues, getFormState, isStateInitied, submitState } = useFormStore(useShallow((state2) => {
+  const {
+    value,
+    setData,
+    getCacheData,
+    getFormValues,
+    // getFormState,
+    isStateInitied,
+    submitState
+  } = useFormStore(useShallow((state2) => {
     var _a, _b, _c, _d;
     return {
       value: get(state2.forms, `${formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)}.${name}`),
       setData: state2.setData,
       getCacheData: state2.getCacheData,
       getFormValues: state2.getFormValues,
-      getFormState: state2.getFormState,
+      // getFormState: state.getFormState,
       isStateInitied: (_b = (_a = state2.formStates) == null ? void 0 : _a[formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)]) == null ? void 0 : _b.isInitied,
       submitState: (_d = (_c = state2.formStates) == null ? void 0 : _c[formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)]) == null ? void 0 : _d.submitState
     };
@@ -79,6 +87,8 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
   const internalRules = useMemo(() => {
     return rules || [];
   }, [rules]);
+  useEffect(() => {
+  }, [value, listener]);
   const { data: errors, state } = useTaskEffect({
     async task() {
       const listErrors = [];
@@ -258,10 +268,13 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
       for (const rAsync of ruleToTask) {
         await rAsync();
       }
-      setListener({ formItemId, internalErrors: listErrors });
       return listErrors;
     },
-    deps: [internalRules, value],
+    deps: [internalRules, value, listener == null ? void 0 : listener.isInitied],
+    enabled: Boolean(listener == null ? void 0 : listener.isInitied),
+    onSuccess(result) {
+      setListener({ formItemId, internalErrors: result });
+    },
     onError(err) {
     }
   });
@@ -278,6 +291,11 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
             initiedData: true
           });
         }
+      } else {
+        onChange(value, {
+          notTriggerDirty: true,
+          initiedData: true
+        });
       }
       return;
     }
@@ -322,14 +340,16 @@ function useFormItemControl({ formName, form, name, initialValue, formItemId, ru
       const isIncludeDirectoryInCache = has(cacheData, name);
       if (!isIncludeDirectoryInCache && isNil(getNewDataFromCache)) {
         onChange(initialValue, {
-          notTriggerDirty: true
+          notTriggerDirty: true,
+          initiedData: true
         });
       } else
-        onChange(getNewDataFromCache, { notTriggerDirty: true });
+        onChange(getNewDataFromCache, {
+          notTriggerDirty: true,
+          initiedData: true
+        });
     }
   }, [name, formName || (form == null ? void 0 : form.formName) || (contextForm == null ? void 0 : contextForm.formName)]);
-  useEffect(() => {
-  }, [submitState]);
   return {
     value,
     onChange,

package/dist/stores/formStore.js

@@ -240,21 +240,19 @@ const createListenersSlice = (storeSet, storeGet, api) => ({
         }
         return;
       }
-      if (name && formName) {
-        storeListeners.push({
-          name,
-          formName,
-          isTouched: Boolean(isTouched),
-          isDirty: Boolean(isDirty),
-          formItemId,
-          internalErrors,
-          onChange,
-          onReset,
-          isInitied: Boolean(isInitied),
-          type: type || "normal",
-          onArrayChange
-        });
-      }
+      storeListeners.push({
+        name,
+        formName,
+        isTouched: Boolean(isTouched),
+        isDirty: Boolean(isDirty),
+        formItemId,
+        internalErrors,
+        onChange,
+        onReset,
+        isInitied: Boolean(isInitied),
+        type: type || "normal",
+        onArrayChange
+      });
     }));
   },
   revokeListener(formItemId, onAfterRevoke) {

package/dist/test/TestDialog.d.ts

@@ -0,0 +1,3 @@
+type Props = {};
+declare function TestDialog({}: Props): import("react/jsx-runtime").JSX.Element;
+export default TestDialog;

package/dist/test/TestDialog.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, DialogContentText, DialogTitle, TextField } from "@mui/material";
+import { Box } from "@mui/system";
+import { useToggle } from "minh-custom-hooks-release";
+import FormItem from "../components/Form/FormItem";
+import TestSelect from "./TestSelect";
+function TestDialog({}) {
+  const { state: open, toggle } = useToggle();
+  return _jsxs(Box, { children: [_jsxs(Dialog, { open, onClose: toggle, children: [_jsx(DialogTitle, { children: "Test Dialog" }), _jsxs(DialogContent, { children: [_jsx(DialogContentText, { children: "This is a test dialog." }), _jsx(FormItem, { rules: [
+    {
+      handler(value) {
+        return Boolean(value);
+      },
+      message: "Testt"
+    }
+  ], controlAfterInit: true, initialValue: null, name: "testSelectInsideDialog", children: _jsx(TestSelect, {}) }), _jsx(FormItem, { controlAfterInit: true, initialValue: "", name: "anotherField", children: _jsx(TextField, {}) })] })] }), _jsx(Button, { variant: "contained", onClick: toggle, children: "Open Test Dialog" })] });
+}
+var stdin_default = TestDialog;
+export {
+  stdin_default as default
+};

package/dist/test/TestSelect.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    value?: any;
+    onChange?: (value: any) => void;
+};
+declare function TestSelect({ value, onChange }: Props): import("react/jsx-runtime").JSX.Element;
+export default TestSelect;

package/dist/test/TestSelect.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Autocomplete, TextField } from "@mui/material";
+function TestSelect({ value = null, onChange }) {
+  return _jsx(Autocomplete, { value, onChange: (_, newValue) => {
+    onChange == null ? void 0 : onChange(newValue);
+  }, renderInput: (params) => _jsx(TextField, { ...params }), options: [
+    {
+      value: "option1",
+      label: "Option 1"
+    },
+    {
+      value: "option2",
+      label: "Option 2"
+    }
+  ], getOptionKey: (o) => {
+    return o == null ? void 0 : o.value;
+  }, getOptionLabel: (o) => {
+    return o == null ? void 0 : o.label;
+  } });
+}
+var stdin_default = TestSelect;
+export {
+  stdin_default as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-form-manage",
-  "version": "1.0.8-beta.18",
+  "version": "1.0.8-beta.20",
   "description": "Lightweight React form management with list and listener support.",
   "license": "MIT",
   "type": "module",

package/src/App.tsx

@@ -6,6 +6,7 @@ import FormItem from "./components/Form/FormItem";
 import FormList from "./components/Form/FormList";
 import InputWrapper from "./components/Form/InputWrapper";
 import Form, { useForm } from "./providers/Form";
+import TestDialog from "./test/TestDialog";
 
 import { Form as AntdForm } from "antd";
 
@@ -154,6 +155,7 @@ const App = () => {
             </div>
           )}
         </FormList>
+        <TestDialog />
         <Button
           onClick={() => {
             form?.setFieldValue("arr", [

package/src/hooks/useFormItemControl.ts

@@ -68,7 +68,7 @@ export default function useFormItemControl<T = any>({
     setData,
     getCacheData,
     getFormValues,
-    getFormState,
+    // getFormState,
     isStateInitied,
     submitState,
   } = useFormStore(
@@ -81,7 +81,7 @@ export default function useFormItemControl<T = any>({
         setData: state.setData,
         getCacheData: state.getCacheData,
         getFormValues: state.getFormValues,
-        getFormState: state.getFormState,
+        // getFormState: state.getFormState,
         isStateInitied:
           state.formStates?.[
             formName || form?.formName || contextForm?.formName
@@ -215,8 +215,17 @@ export default function useFormItemControl<T = any>({
     return rules || [];
   }, [rules]);
 
+  useEffect(() => {
+    console.log("Rules changed: ", { name, listener });
+  }, [value, listener]);
+
   const { data: errors, state } = useTaskEffect({
     async task() {
+      console.log("Trigger validate for form item: ", {
+        formName: formName || form?.formName || contextForm?.formName,
+        name,
+        value,
+      });
       const listErrors = [];
 
       const formValues = getFormValues(
@@ -505,11 +514,13 @@ export default function useFormItemControl<T = any>({
         await rAsync();
       }
 
-      setListener({ formItemId, internalErrors: listErrors });
-
       return listErrors;
     },
-    deps: [internalRules, value],
+    deps: [internalRules, value, listener?.isInitied],
+    enabled: Boolean(listener?.isInitied),
+    onSuccess(result) {
+      setListener({ formItemId, internalErrors: result });
+    },
     onError(err) {
       console.log(err);
     },
@@ -542,6 +553,11 @@ export default function useFormItemControl<T = any>({
             initiedData: true,
           });
         }
+      } else {
+        onChange(value, {
+          notTriggerDirty: true,
+          initiedData: true,
+        });
       }
       return;
     }
@@ -604,15 +620,16 @@ export default function useFormItemControl<T = any>({
       if (!isIncludeDirectoryInCache && isNil(getNewDataFromCache)) {
         onChange(initialValue, {
           notTriggerDirty: true,
+          initiedData: true,
+        });
+      } else
+        onChange(getNewDataFromCache, {
+          notTriggerDirty: true,
+          initiedData: true,
         });
-      } else onChange(getNewDataFromCache, { notTriggerDirty: true });
     }
   }, [name, formName || form?.formName || contextForm?.formName]);
 
-  useEffect(() => {
-    console.log("Submit state changed in useFormItemControl: ", submitState);
-  }, [submitState]);
-
   return {
     value: value as T,
     onChange,

package/src/stores/formStore.ts

@@ -430,21 +430,19 @@ const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
 
           return;
         }
-        if (name && formName) {
-          storeListeners.push({
-            name,
-            formName,
-            isTouched: Boolean(isTouched),
-            isDirty: Boolean(isDirty),
-            formItemId,
-            internalErrors,
-            onChange,
-            onReset,
-            isInitied: Boolean(isInitied),
-            type: type || "normal",
-            onArrayChange,
-          });
-        }
+        storeListeners.push({
+          name,
+          formName,
+          isTouched: Boolean(isTouched),
+          isDirty: Boolean(isDirty),
+          formItemId,
+          internalErrors,
+          onChange,
+          onReset,
+          isInitied: Boolean(isInitied),
+          type: type || "normal",
+          onArrayChange,
+        });
       }),
     );
   },

package/src/test/TestDialog.tsx

@@ -0,0 +1,52 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  TextField,
+} from "@mui/material";
+import { Box } from "@mui/system";
+import { useToggle } from "minh-custom-hooks-release";
+import FormItem from "../components/Form/FormItem";
+import TestSelect from "./TestSelect";
+
+type Props = {};
+
+function TestDialog({}: Props) {
+  const { state: open, toggle } = useToggle();
+  return (
+    <Box>
+      <Dialog open={open} onClose={toggle}>
+        <DialogTitle>Test Dialog</DialogTitle>
+        <DialogContent>
+          <DialogContentText>This is a test dialog.</DialogContentText>
+          <FormItem
+            rules={[
+              {
+                handler(value) {
+                  console.log("Validating in dialog: ", value);
+                  return Boolean(value);
+                },
+                message: "Testt",
+              },
+            ]}
+            controlAfterInit
+            initialValue={null}
+            name="testSelectInsideDialog"
+          >
+            <TestSelect />
+          </FormItem>
+          <FormItem controlAfterInit initialValue={""} name="anotherField">
+            <TextField />
+          </FormItem>
+        </DialogContent>
+      </Dialog>
+      <Button variant="contained" onClick={toggle}>
+        Open Test Dialog
+      </Button>
+    </Box>
+  );
+}
+
+export default TestDialog;

package/src/test/TestSelect.tsx

@@ -0,0 +1,38 @@
+import { Autocomplete, TextField } from "@mui/material";
+
+type Props = {
+  value?: any;
+  onChange?: (value: any) => void;
+};
+
+function TestSelect({ value = null, onChange }: Props) {
+  return (
+    <Autocomplete
+      value={value}
+      onChange={(_, newValue) => {
+        onChange?.(newValue);
+      }}
+      renderInput={(params) => <TextField {...params} />}
+      options={[
+        {
+          value: "option1",
+          label: "Option 1",
+        },
+        {
+          value: "option2",
+          label: "Option 2",
+        },
+      ]}
+      getOptionKey={(o) => {
+        // console.log("Option get key: ", o);
+        return o?.value;
+      }}
+      getOptionLabel={(o) => {
+        // console.log("Option get label: ", o);
+        return o?.label;
+      }}
+    />
+  );
+}
+
+export default TestSelect;