fix: mobx strict mode for hooks and handlers

CHANGELOG.md

@@ -1,3 +1,6 @@
+# 6.7.2 (master)
+- Fix: mobx strict mode for hooks and handlers
+
 # 6.7.1 (master)
 - Fix: #632 observable hooks and handlers
 

src/Base.ts

@@ -918,7 +918,7 @@ export default class Base implements BaseInterface {
    */
   each(iteratee: any, fields: any = null, depth: number = 0) {
     const $fields = fields || this.fields;
-    _.each(getObservableMapValues($fields), (field: FieldInterface, index) => {
+    getObservableMapValues($fields).forEach((field: FieldInterface, index) => {
       iteratee(field, index, depth);
 
       if (field.fields.size !== 0) {
@@ -928,7 +928,7 @@ export default class Base implements BaseInterface {
   }
 
   reduce(iteratee: any, acc: any): any {
-    return _.reduce(getObservableMapValues(this.fields), iteratee, acc);
+    return getObservableMapValues(this.fields).reduce(iteratee, acc);
   }
 
   /******************************************************************

src/Field.ts

@@ -8,6 +8,7 @@ import {
   untracked,
   makeObservable,
   autorun,
+  runInAction,
 } from "mobx";
 import _ from "lodash";
 import Base from "./Base";
@@ -275,8 +276,8 @@ export default class Field extends Base implements FieldInterface {
     this.initMOBXEvent(FieldPropsEnum.interceptors);
 
     // setup hooks & handlers from initialization methods
-    Object.assign(this.$hooks, (this as any).hooks?.apply(this, [this]));
-    Object.assign(this.$handlers, (this as any).handlers?.apply(this, [this]));
+    runInAction(() => Object.assign(this.$hooks, (this as any).hooks?.apply(this, [this])));
+    runInAction(() => Object.assign(this.$handlers, (this as any).handlers?.apply(this, [this])));
 
     this.execHook(FieldPropsEnum.onInit);
 
@@ -749,7 +750,7 @@ export default class Field extends Base implements FieldInterface {
       this.$resetting = false;
       this.$clearing = false;
     }))
-    if (deep) this.each((field: any) => field.resetValidation(deep));
+    if (deep) this.each((field: FieldInterface) => field.resetValidation(deep));
   }
 
   clear(deep: boolean = true, execHook: boolean = true): void {
@@ -813,7 +814,7 @@ export default class Field extends Base implements FieldInterface {
   showErrors(show: boolean = true): void {
     this.showError = show;
     this.errorSync = _.head(this.validationErrorStack) as string;
-    this.each((field: any) => field.showErrors(show));
+    this.each((field: FieldInterface) => field.showErrors(show));
   }
 
   showAsyncErrors(): void {

src/Form.ts

@@ -1,4 +1,4 @@
-import { action, computed, observable, makeObservable, autorun } from "mobx";
+import { action, computed, observable, makeObservable, autorun, runInAction } from "mobx";
 import _ from "lodash";
 
 import Base from "./Base";
@@ -50,8 +50,8 @@ export default class Form extends Base implements FormInterface {
     });
 
     this.name = name;
-    this.$hooks = hooks;
-    this.$handlers = handlers;
+    runInAction(() => (this.$hooks = hooks));
+    runInAction(() => (this.$handlers = handlers));
 
     // load data from initializers methods
     const initial = _.each(
@@ -68,8 +68,8 @@ export default class Form extends Base implements FormInterface {
     );
 
     // setup hooks & handlers from initialization methods
-    Object.assign(this.$hooks, (this as any).hooks?.apply(this, [this]));
-    Object.assign(this.$handlers, (this as any).handlers?.apply(this, [this]));
+    runInAction(() => Object.assign(this.$hooks, (this as any).hooks?.apply(this, [this])));
+    runInAction(() => Object.assign(this.$handlers, (this as any).handlers?.apply(this, [this])));
 
     this.state = new State({
       form: this,