@dnb/eufemia 10.45.0 → 10.47.0

package/es/extensions/forms/hooks/useFieldProps.js

@@ -11,11 +11,9 @@ import { FormError } from '../types';
 import { Context as DataContext } from '../DataContext';
 import { clearedData } from '../DataContext/Provider/Provider';
 import FieldPropsContext from '../Form/FieldProps/FieldPropsContext';
-import { combineDescribedBy } from '../../../shared/component-helper';
+import { combineDescribedBy, warn } from '../../../shared/component-helper';
 import useId from '../../../shared/helpers/useId';
 import useUpdateEffect from '../../../shared/helpers/useUpdateEffect';
-import useMountEffect from '../../../shared/helpers/useMountEffect';
-import useUnmountEffect from '../../../shared/helpers/useUnmountEffect';
 import FieldBlockContext from '../FieldBlock/FieldBlockContext';
 import IterateElementContext from '../Iterate/IterateItemContext';
 import SectionContext from '../Form/Section/SectionContext';
@@ -26,6 +24,7 @@ import { createSharedState, useSharedState } from '../../../shared/helpers/useSh
 import { isAsync } from '../../../shared/helpers/isAsync';
 import useTranslation from './useTranslation';
 import useExternalValue from './useExternalValue';
+import useDataValue from './useDataValue';
 export default function useFieldProps(localeProps, {
   executeOnChangeRegardlessOfError = false
 } = {}) {
@@ -51,6 +50,7 @@ export default function useFieldProps(localeProps, {
     onChange,
     onBlurValidator,
     validator,
+    exportValidators,
     schema,
     validateInitially,
     validateUnchanged,
@@ -72,7 +72,11 @@ export default function useFieldProps(localeProps, {
       return res;
     }
   } = props;
-  const [, forceUpdate] = useReducer(() => ({}), {});
+  const [salt, forceUpdate] = useReducer(() => ({}), {});
+  const isInternalRerenderRef = useRef(undefined);
+  useMemo(() => {
+    isInternalRerenderRef.current = salt;
+  }, [salt]);
   const {
     startProcess
   } = useProcessManager();
@@ -103,10 +107,13 @@ export default function useFieldProps(localeProps, {
     setFieldError: setFieldErrorDataContext,
     setFieldProps: setPropsDataContext,
     setHasVisibleError: setHasVisibleErrorDataContext,
+    handleMountField,
+    handleUnMountField,
+    setFieldEventListener,
     errors: dataContextErrors,
     showAllErrors,
     contextErrorMessages
-  } = dataContext !== null && dataContext !== void 0 ? dataContext : {};
+  } = dataContext || {};
   const onChangeContext = dataContext === null || dataContext === void 0 ? void 0 : (_dataContext$props = dataContext.props) === null || _dataContext$props === void 0 ? void 0 : _dataContext$props.onChange;
   const disabled = disabledProp !== null && disabledProp !== void 0 ? disabledProp : props.readOnly;
   const inFieldBlock = Boolean(fieldBlockContext);
@@ -114,18 +121,18 @@ export default function useFieldProps(localeProps, {
     setFieldState: setFieldStateFieldBlock,
     showFieldError: showFieldErrorFieldBlock,
     mountedFieldsRef: mountedFieldsRefFieldBlock
-  } = fieldBlockContext !== null && fieldBlockContext !== void 0 ? fieldBlockContext : {};
+  } = fieldBlockContext || {};
   const {
     handleChange: handleChangeIterateContext
-  } = iterateItemContext !== null && iterateItemContext !== void 0 ? iterateItemContext : {};
+  } = iterateItemContext || {};
   const {
     path: sectionPath,
     errorPrioritization
-  } = sectionContext !== null && sectionContext !== void 0 ? sectionContext : {};
+  } = sectionContext || {};
   const {
     setFieldError,
     showBoundaryErrors
-  } = fieldBoundaryContext !== null && fieldBoundaryContext !== void 0 ? fieldBoundaryContext : {};
+  } = fieldBoundaryContext || {};
   const hasPath = Boolean(pathProp);
   const {
     path,
@@ -145,8 +152,8 @@ export default function useFieldProps(localeProps, {
     emptyValue
   })) !== null && _useExternalValue !== void 0 ? _useExternalValue : defaultValueRef.current;
   const valueRef = useRef(externalValue);
-  const changedRef = useRef(false);
-  const hasFocusRef = useRef(false);
+  const changedRef = useRef();
+  const hasFocusRef = useRef();
   const required = useMemo(() => {
     if (requiredProp) {
       return requiredProp;
@@ -177,9 +184,9 @@ export default function useFieldProps(localeProps, {
     return path ? dataContextErrors === null || dataContextErrors === void 0 ? void 0 : dataContextErrors[identifier] : undefined;
   }, [dataContextErrors, identifier, path]);
   const contextErrorRef = useRef(dataContextError);
-  const validatorRef = useRef(validator);
+  const onChangeValidatorRef = useRef(validator);
   useUpdateEffect(() => {
-    validatorRef.current = validator;
+    onChangeValidatorRef.current = validator;
   }, [validator]);
   const onBlurValidatorRef = useRef(onBlurValidator);
   useUpdateEffect(() => {
@@ -258,22 +265,21 @@ export default function useFieldProps(localeProps, {
     }
   }, [setFieldStateDataContext, identifier, validateInitially]);
   const revealError = useCallback(() => {
-    revealErrorRef.current = true;
-    showFieldErrorFieldBlock === null || showFieldErrorFieldBlock === void 0 ? void 0 : showFieldErrorFieldBlock(identifier, true);
-    if (localErrorRef.current) {
-      setHasVisibleErrorDataContext === null || setHasVisibleErrorDataContext === void 0 ? void 0 : setHasVisibleErrorDataContext(identifier, true);
-    } else {
-      setHasVisibleErrorDataContext === null || setHasVisibleErrorDataContext === void 0 ? void 0 : setHasVisibleErrorDataContext(identifier, false);
+    if (!revealErrorRef.current) {
+      revealErrorRef.current = true;
+      showFieldErrorFieldBlock === null || showFieldErrorFieldBlock === void 0 ? void 0 : showFieldErrorFieldBlock(identifier, true);
+      setHasVisibleErrorDataContext === null || setHasVisibleErrorDataContext === void 0 ? void 0 : setHasVisibleErrorDataContext(identifier, !!localErrorRef.current);
     }
-  }, [showFieldErrorFieldBlock, identifier, setHasVisibleErrorDataContext]);
+  }, [identifier, setHasVisibleErrorDataContext, showFieldErrorFieldBlock]);
   const hideError = useCallback(() => {
-    revealErrorRef.current = false;
-    showFieldErrorFieldBlock === null || showFieldErrorFieldBlock === void 0 ? void 0 : showFieldErrorFieldBlock(identifier, false);
-    setHasVisibleErrorDataContext === null || setHasVisibleErrorDataContext === void 0 ? void 0 : setHasVisibleErrorDataContext(identifier, false);
-  }, [setHasVisibleErrorDataContext, identifier, showFieldErrorFieldBlock]);
+    if (revealErrorRef.current) {
+      revealErrorRef.current = false;
+      showFieldErrorFieldBlock === null || showFieldErrorFieldBlock === void 0 ? void 0 : showFieldErrorFieldBlock(identifier, false);
+      setHasVisibleErrorDataContext === null || setHasVisibleErrorDataContext === void 0 ? void 0 : setHasVisibleErrorDataContext(identifier, false);
+    }
+  }, [identifier, setHasVisibleErrorDataContext, showFieldErrorFieldBlock]);
   const prepareError = useCallback(error => {
     if (error instanceof FormError) {
-      var _error$messageValues;
       let message = error.message;
       const {
         validationRule
@@ -285,10 +291,10 @@ export default function useFieldProps(localeProps, {
           message = fieldMessage;
         }
       }
-      const messagehasValues = Object.entries((_error$messageValues = error.messageValues) !== null && _error$messageValues !== void 0 ? _error$messageValues : {}).reduce((message, [key, value]) => {
+      const messageHasValues = Object.entries(error.messageValues || {}).reduce((message, [key, value]) => {
         return message.replace(`{${key}}`, value);
       }, message);
-      error.message = messagehasValues;
+      error.message = messageHasValues;
       return error;
     }
     return error;
@@ -308,6 +314,73 @@ export default function useFieldProps(localeProps, {
     var _ref2;
     return Boolean((_ref2 = errorProp !== null && errorProp !== void 0 ? errorProp : localErrorRef.current) !== null && _ref2 !== void 0 ? _ref2 : contextErrorRef.current);
   }, [errorProp]);
+  const connectWithPathListenerRef = useRef(async () => {
+    if (localErrorRef.current || validateUnchanged || continuousValidation) {
+      if (onChangeValidatorRef.current) {
+        runOnChangeValidator();
+      }
+    }
+    if (localErrorRef.current && onBlurValidatorRef.current) {
+      runOnBlurValidator();
+    }
+  });
+  const {
+    getValueByPath
+  } = useDataValue();
+  const exportValidatorsRef = useRef(exportValidators);
+  exportValidatorsRef.current = exportValidators;
+  const additionalArgs = useMemo(() => {
+    const errorMessages = _objectSpread(_objectSpread({}, contextErrorMessages), errorMessagesRef.current);
+    const args = _objectSpread(_objectSpread({}, errorMessages), {}, {
+      errorMessages,
+      validators: exportValidatorsRef.current,
+      connectWithPath: path => {
+        setFieldEventListener === null || setFieldEventListener === void 0 ? void 0 : setFieldEventListener(path, 'onPathChange', connectWithPathListenerRef.current);
+        return {
+          getValue: () => getValueByPath(path)
+        };
+      }
+    });
+    return args;
+  }, [contextErrorMessages, getValueByPath, setFieldEventListener]);
+  const extendWithExportedValidators = useCallback((validator, result) => {
+    if (exportValidatorsRef.current && !result && (validator === onChangeValidatorRef.current || validator === onBlurValidatorRef.current) && !Array.isArray(result)) {
+      return Object.values(exportValidatorsRef.current);
+    }
+    return result;
+  }, []);
+  const callValidatorFnSync = useCallback((validator, value = valueRef.current) => {
+    if (typeof validator !== 'function') {
+      return undefined;
+    }
+    const result = extendWithExportedValidators(validator, validator(value, additionalArgs));
+    if (Array.isArray(result)) {
+      for (const validator of result) {
+        const result = callValidatorFnSync(validator, value);
+        if (result instanceof Error) {
+          return result;
+        }
+      }
+      return;
+    }
+    return result;
+  }, [additionalArgs, extendWithExportedValidators]);
+  const callValidatorFnAsync = useCallback(async (validator, value = valueRef.current) => {
+    if (typeof validator !== 'function') {
+      return undefined;
+    }
+    const result = extendWithExportedValidators(validator, await validator(value, additionalArgs));
+    if (Array.isArray(result)) {
+      for (const validator of result) {
+        const result = await callValidatorFnAsync(validator, value);
+        if (result instanceof Error) {
+          return result;
+        }
+      }
+      return;
+    }
+    return result;
+  }, [additionalArgs, extendWithExportedValidators]);
   const stateId = useId();
   const persistErrorState = useCallback((method, errorArg = undefined) => {
     const error = prepareError(errorArg);
@@ -339,23 +412,18 @@ export default function useFieldProps(localeProps, {
     persistErrorState('wipe');
     hasLocalErrorRef.current = false;
   }, [persistErrorState]);
-  const callValidator = useCallback(async () => {
-    if (typeof validatorRef.current !== 'function') {
-      return;
-    }
-    const runAsync = isAsync(validatorRef.current);
-    if (runAsync) {
-      defineAsyncProcess('validator');
-      setFieldState('validating');
-      hideError();
-    }
-    const opts = _objectSpread(_objectSpread({}, contextErrorMessages), errorMessagesRef.current);
-    const tmpValue = valueRef.current;
-    const result = await validatorRef.current(valueRef.current, opts);
-    const unchangedValue = tmpValue === valueRef.current;
+  const validatorCacheRef = useRef({
+    onChangeValidator: null,
+    onBlurValidator: null
+  });
+  const revealOnChangeValidatorResult = useCallback(({
+    result,
+    unchangedValue
+  }) => {
+    const runAsync = isAsync(onChangeValidatorRef.current);
     if (unchangedValue) {
       persistErrorState('gracefully', result);
-      if (continuousValidation || runAsync) {
+      if (validateInitially && !changedRef.current || validateUnchanged || continuousValidation || runAsync) {
         window.requestAnimationFrame(() => {
           revealError();
           forceUpdate();
@@ -370,29 +438,129 @@ export default function useFieldProps(localeProps, {
         setFieldState('pending');
       }
     }
-    return result;
-  }, [contextErrorMessages, continuousValidation, hideError, persistErrorState, defineAsyncProcess, setFieldState, revealError]);
+  }, [continuousValidation, defineAsyncProcess, persistErrorState, revealError, setFieldState, validateInitially, validateUnchanged]);
+  const callOnChangeValidator = useCallback(async () => {
+    if (typeof onChangeValidatorRef.current !== 'function') {
+      return {};
+    }
+    const tmpValue = valueRef.current;
+    let result = isAsync(onChangeValidatorRef.current) ? await callValidatorFnAsync(onChangeValidatorRef.current) : callValidatorFnSync(onChangeValidatorRef.current);
+    if (result instanceof Promise) {
+      result = await result;
+    }
+    const unchangedValue = tmpValue === valueRef.current;
+    return {
+      result,
+      unchangedValue
+    };
+  }, [callValidatorFnAsync, callValidatorFnSync]);
+  const startOnChangeValidatorValidation = useCallback(async () => {
+    if (typeof onChangeValidatorRef.current !== 'function') {
+      return;
+    }
+    if (isAsync(onChangeValidatorRef.current)) {
+      defineAsyncProcess('validator');
+      setFieldState('validating');
+      hideError();
+    }
+    const tmpValue = valueRef.current;
+    let result = isAsync(onChangeValidatorRef.current) ? await callValidatorFnAsync(onChangeValidatorRef.current) : callValidatorFnSync(onChangeValidatorRef.current);
+    if (result instanceof Promise) {
+      result = await result;
+    }
+    const unchangedValue = tmpValue === valueRef.current;
+    revealOnChangeValidatorResult({
+      result,
+      unchangedValue
+    });
+    return {
+      result
+    };
+  }, [callValidatorFnAsync, callValidatorFnSync, defineAsyncProcess, hideError, revealOnChangeValidatorResult, setFieldState]);
+  const runOnChangeValidator = useCallback(async () => {
+    if (!onChangeValidatorRef.current) {
+      return;
+    }
+    const {
+      result,
+      unchangedValue
+    } = await callOnChangeValidator();
+    if (String(result) !== String(validatorCacheRef.current.onChangeValidator)) {
+      if (result) {
+        revealOnChangeValidatorResult({
+          result,
+          unchangedValue
+        });
+      } else {
+        hideError();
+        clearErrorState();
+      }
+    }
+    validatorCacheRef.current.onChangeValidator = result || null;
+  }, [callOnChangeValidator, clearErrorState, hideError, revealOnChangeValidatorResult]);
   const callOnBlurValidator = useCallback(async ({
-    valueOverride = null
+    overrideValue = null
   } = {}) => {
     if (typeof onBlurValidatorRef.current !== 'function') {
-      return;
+      return {};
     }
-    const value = transformers.current.toEvent(valueOverride !== null && valueOverride !== void 0 ? valueOverride : valueRef.current, 'onBlurValidator');
-    const runAsync = isAsync(onBlurValidatorRef.current);
-    if (runAsync) {
-      defineAsyncProcess('onBlurValidator');
-      setFieldState('validating');
+    const value = transformers.current.toEvent(overrideValue !== null && overrideValue !== void 0 ? overrideValue : valueRef.current, 'onBlurValidator');
+    let result = isAsync(onBlurValidatorRef.current) ? await callValidatorFnAsync(onBlurValidatorRef.current, value) : callValidatorFnSync(onBlurValidatorRef.current, value);
+    if (result instanceof Promise) {
+      result = await result;
     }
-    const result = await onBlurValidatorRef.current(value);
+    return {
+      result
+    };
+  }, [callValidatorFnAsync, callValidatorFnSync]);
+  const revealOnBlurValidatorResult = useCallback(({
+    result
+  }) => {
     persistErrorState('gracefully', result);
-    if (runAsync) {
+    if (isAsync(onBlurValidatorRef.current)) {
       defineAsyncProcess(undefined);
       setFieldState(result instanceof Error ? 'error' : 'complete');
     }
     revealError();
-    forceUpdate();
-  }, [persistErrorState, defineAsyncProcess, setFieldState, revealError]);
+  }, [defineAsyncProcess, persistErrorState, revealError, setFieldState]);
+  const startOnBlurValidatorProcess = useCallback(async ({
+    overrideValue = null
+  } = {}) => {
+    if (typeof onBlurValidatorRef.current !== 'function') {
+      return;
+    }
+    if (isAsync(onBlurValidatorRef.current)) {
+      defineAsyncProcess('onBlurValidator');
+      setFieldState('validating');
+    }
+    const {
+      result
+    } = await callOnBlurValidator({
+      overrideValue
+    });
+    revealOnBlurValidatorResult({
+      result
+    });
+  }, [callOnBlurValidator, defineAsyncProcess, revealOnBlurValidatorResult, setFieldState]);
+  const runOnBlurValidator = useCallback(async () => {
+    if (!onBlurValidatorRef.current) {
+      return;
+    }
+    const {
+      result
+    } = await callOnBlurValidator();
+    if (String(result) !== String(validatorCacheRef.current.onBlurValidator) && revealErrorRef.current) {
+      if (result) {
+        revealOnBlurValidatorResult({
+          result
+        });
+      } else {
+        hideError();
+        clearErrorState();
+      }
+    }
+    validatorCacheRef.current.onBlurValidator = result || null;
+  }, [callOnBlurValidator, clearErrorState, hideError, revealOnBlurValidatorResult]);
   const prioritizeContextSchema = useMemo(() => {
     if (errorPrioritization) {
       const schemaPath = identifier.split('/').join('/properties/');
@@ -429,8 +597,10 @@ export default function useFieldProps(localeProps, {
         const error = ajvErrorsToOneFormError(schemaValidatorRef.current.errors, valueRef.current);
         throw error;
       }
-      if (validatorRef.current && (changedRef.current || validateInitially)) {
-        const result = await callValidator();
+      if (onChangeValidatorRef.current && (changedRef.current || validateInitially || validateUnchanged)) {
+        const {
+          result
+        } = await startOnChangeValidatorValidation();
         if (result instanceof Error) {
           throw result;
         }
@@ -445,7 +615,7 @@ export default function useFieldProps(localeProps, {
         persistErrorState('weak', error);
       }
     }
-  }, [startProcess, disabled, hideError, setFieldState, clearErrorState, emptyValue, requiredProp, required, prioritizeContextSchema, validateInitially, callValidator, persistErrorState]);
+  }, [startProcess, disabled, hideError, setFieldState, clearErrorState, emptyValue, requiredProp, required, prioritizeContextSchema, validateInitially, validateUnchanged, startOnChangeValidatorValidation, persistErrorState]);
   const handleError = useCallback(() => {
     if (continuousValidation || continuousValidation !== false && !hasFocusRef.current) {
       revealError();
@@ -453,9 +623,9 @@ export default function useFieldProps(localeProps, {
       hideError();
     }
   }, [continuousValidation, hideError, revealError]);
-  const setHasFocus = useCallback(async (hasFocus, valueOverride, additionalArgs) => {
+  const setHasFocus = useCallback(async (hasFocus, overrideValue, additionalArgs) => {
     const getArgs = type => {
-      const value = transformers.current.toEvent(valueOverride !== null && valueOverride !== void 0 ? valueOverride : valueRef.current, type);
+      const value = transformers.current.toEvent(overrideValue !== null && overrideValue !== void 0 ? overrideValue : valueRef.current, type);
       const transformedAdditionalArgs = transformers.current.transformAdditionalArgs(additionalArgs, value);
       return typeof transformedAdditionalArgs !== 'undefined' ? [value, transformedAdditionalArgs] : [value];
     };
@@ -470,15 +640,15 @@ export default function useFieldProps(localeProps, {
       if (!changedRef.current && !validateUnchanged) {
         return;
       }
-      addToPool('onBlurValidator', async () => await callOnBlurValidator({
-        valueOverride
+      addToPool('onBlurValidator', async () => await startOnBlurValidatorProcess({
+        overrideValue
       }), isAsync(onBlurValidatorRef.current));
       await runPool(() => {
         revealError();
         forceUpdate();
       });
     }
-  }, [addToPool, callOnBlurValidator, onBlur, onFocus, runPool, revealError, validateUnchanged]);
+  }, [onFocus, onBlur, validateUnchanged, addToPool, runPool, startOnBlurValidatorProcess, revealError]);
   const yieldAsyncProcess = useCallback(async ({
     name,
     waitFor
@@ -584,7 +754,7 @@ export default function useFieldProps(localeProps, {
     if (hasPath) {
       handlePathChangeUnvalidatedDataContext(identifier, newValue);
     }
-    addToPool('validator', validateValue, isAsync(validatorRef.current));
+    addToPool('validator', validateValue, isAsync(onChangeValidatorRef.current));
     addToPool('onChangeContext', callOnChangeContext, isAsync(onChangeContext));
     await runPool(() => {
       handleError();
@@ -646,16 +816,18 @@ export default function useFieldProps(localeProps, {
   const handleFocus = useCallback(() => setHasFocus(true), [setHasFocus]);
   const handleBlur = useCallback(() => setHasFocus(false), [setHasFocus]);
   setPropsDataContext === null || setPropsDataContext === void 0 ? void 0 : setPropsDataContext(identifier, props);
-  useMountEffect(() => {
-    dataContext === null || dataContext === void 0 ? void 0 : dataContext.handleMountField(identifier);
+  useEffect(() => {
+    handleMountField(identifier);
+    return () => {
+      handleUnMountField(identifier);
+      setFieldErrorDataContext === null || setFieldErrorDataContext === void 0 ? void 0 : setFieldErrorDataContext(identifier, undefined);
+      setFieldError === null || setFieldError === void 0 ? void 0 : setFieldError(identifier, undefined);
+      localErrorRef.current = undefined;
+    };
+  }, [handleMountField, handleUnMountField, identifier, setFieldError, setFieldErrorDataContext]);
+  useEffect(() => {
     validateValue();
-  });
-  useUnmountEffect(() => {
-    dataContext === null || dataContext === void 0 ? void 0 : dataContext.handleUnMountField(identifier);
-    setFieldErrorDataContext === null || setFieldErrorDataContext === void 0 ? void 0 : setFieldErrorDataContext(identifier, undefined);
-    setFieldError === null || setFieldError === void 0 ? void 0 : setFieldError(identifier, undefined);
-    localErrorRef.current = undefined;
-  });
+  }, [validateValue]);
   useUpdateEffect(() => {
     var _dataContext$ajvInsta2;
     schemaValidatorRef.current = schema ? (_dataContext$ajvInsta2 = dataContext.ajvInstance) === null || _dataContext$ajvInsta2 === void 0 ? void 0 : _dataContext$ajvInsta2.compile(schema) : undefined;
@@ -686,6 +858,14 @@ export default function useFieldProps(localeProps, {
       }
     }
   }, [clearErrorState, dataContextError, handleError, persistErrorState, prepareError, validateInitially]);
+  useEffect(() => {
+    if (itemPath && valueProp !== undefined) {
+      warn(`Using value="${valueProp}" prop inside Iterate is not supported yet`);
+    }
+    if (itemPath && defaultValue !== undefined) {
+      warn(`Using defaultValue="${defaultValue}" prop inside Iterate is not supported yet`);
+    }
+  }, [defaultValue, itemPath, valueProp]);
   useEffect(() => {
     if (hasPath) {
       let value = valueProp;
@@ -710,7 +890,7 @@ export default function useFieldProps(localeProps, {
         validateDataDataContext === null || validateDataDataContext === void 0 ? void 0 : validateDataDataContext();
       }
     }
-  }, [dataContext.data, dataContext.id, hasPath, identifier, updateDataValueDataContext, validateDataDataContext, valueProp]);
+  }, [dataContext.data, dataContext.id, defaultValue, hasPath, identifier, updateDataValueDataContext, validateDataDataContext, valueProp]);
   useEffect(() => {
     if (showAllErrors || showBoundaryErrors) {
       if (fieldStateRef.current !== 'validating') {
@@ -721,7 +901,7 @@ export default function useFieldProps(localeProps, {
     }
   }, [hideError, revealError, showAllErrors, showBoundaryErrors]);
   useEffect(() => {
-    if (dataContext.formState === 'pending' && (validatorRef.current || onBlurValidatorRef.current)) {
+    if (dataContext.formState === 'pending' && (onChangeValidatorRef.current || onBlurValidatorRef.current)) {
       hideError();
       forceUpdate();
     }
@@ -730,50 +910,43 @@ export default function useFieldProps(localeProps, {
     if (hasError()) {
       return;
     }
-    addToPool('validator', callValidator, isAsync(validatorRef.current));
-    addToPool('onBlurValidator', callOnBlurValidator, isAsync(onBlurValidatorRef.current));
+    addToPool('validator', startOnChangeValidatorValidation, isAsync(onChangeValidatorRef.current));
+    addToPool('onBlurValidator', startOnBlurValidatorProcess, isAsync(onBlurValidatorRef.current));
     await runPool();
-  }, [addToPool, callOnBlurValidator, callValidator, hasError, runPool]);
-  useMountEffect(() => {
-    var _dataContext$setField;
-    dataContext === null || dataContext === void 0 ? void 0 : (_dataContext$setField = dataContext.setFieldEventListener) === null || _dataContext$setField === void 0 ? void 0 : _dataContext$setField.call(dataContext, identifier, 'onSubmit', onSubmitHandler);
-  });
-  useMountEffect(() => {
+  }, [addToPool, startOnBlurValidatorProcess, hasError, runPool, startOnChangeValidatorValidation]);
+  useEffect(() => {
+    setFieldEventListener === null || setFieldEventListener === void 0 ? void 0 : setFieldEventListener(identifier, 'onSubmit', onSubmitHandler);
+  }, [identifier, onSubmitHandler, setFieldEventListener]);
+  useEffect(() => {
     if (inFieldBlock) {
-      if (errorProp) {
-        setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
-          identifier,
-          type: 'error',
-          content: errorProp,
-          showInitially: true,
-          show: true
-        });
-      }
-      if (warning) {
-        setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
-          identifier,
-          type: 'warning',
-          content: warning,
-          showInitially: true,
-          show: true
-        });
-      }
-      if (info) {
-        setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
-          identifier,
-          type: 'info',
-          content: info,
-          showInitially: true,
-          show: true
-        });
-      }
+      setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
+        identifier,
+        type: 'error',
+        content: errorProp,
+        showInitially: true,
+        show: true
+      });
+      setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
+        identifier,
+        type: 'warning',
+        content: warning,
+        showInitially: true,
+        show: true
+      });
+      setFieldStateFieldBlock === null || setFieldStateFieldBlock === void 0 ? void 0 : setFieldStateFieldBlock({
+        identifier,
+        type: 'info',
+        content: info,
+        showInitially: true,
+        show: true
+      });
       return () => {
         if (mountedFieldsRefFieldBlock) {
           mountedFieldsRefFieldBlock.current[identifier] = true;
         }
       };
     }
-  });
+  }, [errorProp, identifier, inFieldBlock, info, mountedFieldsRefFieldBlock, setFieldStateFieldBlock, warning]);
   const infoRef = useRef(info);
   const warningRef = useRef(warning);
   useUpdateEffect(() => {
@@ -819,13 +992,16 @@ export default function useFieldProps(localeProps, {
   };
   const sharedData = useSharedState('field-block-props-' + id);
   sharedData.set(fieldBlockProps);
+  useEffect(() => {
+    isInternalRerenderRef.current = undefined;
+  });
   return _objectSpread(_objectSpread(_objectSpread({}, props), fieldBlockProps), {}, {
     name: props.name || ((_props$path = props.path) === null || _props$path === void 0 ? void 0 : _props$path.replace('/', '')) || id,
     autoComplete: (_props$autoComplete = props.autoComplete) !== null && _props$autoComplete !== void 0 ? _props$autoComplete : dataContext.autoComplete === true ? 'on' : undefined,
     id,
     value: transformers.current.transformIn(transformers.current.toInput(valueRef.current)),
     hasError: hasVisibleError,
-    isChanged: changedRef.current,
+    isChanged: Boolean(changedRef.current),
     props,
     htmlAttributes,
     setHasFocus,