@dnb/eufemia 10.23.0 → 10.25.0

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

@@ -94,6 +94,7 @@ function useFieldProps(props) {
     validateRequired
   });
   const {
+    handlePathChangeUnvalidated: handlePathChangeUnvalidatedDataContext,
     handlePathChange: handlePathChangeDataContext,
     updateDataValue: updateDataValueDataContext,
     validateData: validateDataDataContext,
@@ -165,22 +166,22 @@ function useFieldProps(props) {
   const asyncBehaviorIsEnabled = (0, _react.useMemo)(() => {
     return (0, _isAsync.isAsync)(onChange) || (0, _isAsync.isAsync)(onChangeContext);
   }, [onChangeContext, onChange]);
-  const validatedWithValue = (0, _react.useRef)();
+  const validatedValue = (0, _react.useRef)();
   const changeEventResultRef = (0, _react.useRef)(null);
-  const currentAsyncProcessRef = (0, _react.useRef)(null);
-  const setCurrentAsyncProcess = (0, _react.useCallback)(name => {
-    currentAsyncProcessRef.current = name;
+  const asyncProcessRef = (0, _react.useRef)(null);
+  const defineAsyncProcess = (0, _react.useCallback)(name => {
+    asyncProcessRef.current = name;
   }, []);
   const asyncBufferRef = (0, _react.useRef)({});
   for (const key in asyncBufferRef.current) {
     const {
-      fulfill,
-      hasAsyncProcesses
+      resolve,
+      validateProcesses
     } = asyncBufferRef.current[key] || {};
-    if ((hasAsyncProcesses === null || hasAsyncProcesses === void 0 ? void 0 : hasAsyncProcesses()) === false) {
+    if ((validateProcesses === null || validateProcesses === void 0 ? void 0 : validateProcesses()) === false) {
       delete asyncBufferRef.current[key];
-      if (typeof fulfill === 'function') {
-        window.requestAnimationFrame(fulfill);
+      if (typeof resolve === 'function') {
+        window.requestAnimationFrame(resolve);
       }
     }
   }
@@ -308,24 +309,33 @@ function useFieldProps(props) {
     }
     const runAsync = (0, _isAsync.isAsync)(validatorRef.current);
     if (runAsync) {
-      setCurrentAsyncProcess('validator');
+      defineAsyncProcess('validator');
       setFieldState('validating');
       hideError();
     }
     const opts = _objectSpread(_objectSpread({}, contextErrorMessages), errorMessagesRef.current);
+    const tmpValue = valueRef.current;
     const result = await validatorRef.current(valueRef.current, opts);
-    persistErrorState('gracefully', result);
-    if (runAsync) {
-      setFieldState(result instanceof Error ? 'error' : 'complete');
+    const unchangedValue = tmpValue === valueRef.current;
+    if (unchangedValue) {
+      persistErrorState('gracefully', result);
+      if (continuousValidation || runAsync) {
+        window.requestAnimationFrame(() => {
+          showError();
+          forceUpdate();
+        });
+      }
     }
-    if (continuousValidation || runAsync) {
-      window.requestAnimationFrame(() => {
-        showError();
-        forceUpdate();
-      });
+    if (runAsync) {
+      defineAsyncProcess(undefined);
+      if (unchangedValue) {
+        setFieldState(result instanceof Error ? 'error' : 'complete');
+      } else {
+        setFieldState('pending');
+      }
     }
     return result;
-  }, [contextErrorMessages, continuousValidation, hideError, persistErrorState, setCurrentAsyncProcess, setFieldState, showError]);
+  }, [contextErrorMessages, continuousValidation, hideError, persistErrorState, defineAsyncProcess, setFieldState, showError]);
   const callOnBlurValidator = (0, _react.useCallback)(async function () {
     let {
       valueOverride = null
@@ -336,17 +346,18 @@ function useFieldProps(props) {
     const value = transformers.current.toEvent(valueOverride !== null && valueOverride !== void 0 ? valueOverride : valueRef.current, 'onBlurValidator');
     const runAsync = (0, _isAsync.isAsync)(onBlurValidatorRef.current);
     if (runAsync) {
-      setCurrentAsyncProcess('onBlurValidator');
+      defineAsyncProcess('onBlurValidator');
       setFieldState('validating');
     }
     const result = await onBlurValidatorRef.current(value);
     persistErrorState('gracefully', result);
     if (runAsync) {
+      defineAsyncProcess(undefined);
       setFieldState(result instanceof Error ? 'error' : 'complete');
     }
     showError();
     forceUpdate();
-  }, [persistErrorState, setCurrentAsyncProcess, setFieldState, showError]);
+  }, [persistErrorState, defineAsyncProcess, setFieldState, showError]);
   const validateValue = (0, _react.useCallback)(async () => {
     const isProcessActive = startProcess();
     if (disabled) {
@@ -359,7 +370,7 @@ function useFieldProps(props) {
     }
     const value = valueRef.current;
     changeEventResultRef.current = null;
-    validatedWithValue.current = null;
+    validatedValue.current = null;
     try {
       const requiredError = transformers.current.validateRequired(value, {
         emptyValue,
@@ -385,7 +396,7 @@ function useFieldProps(props) {
       if (isProcessActive()) {
         clearErrorState();
       }
-      validatedWithValue.current = value;
+      validatedValue.current = value;
     } catch (error) {
       if (isProcessActive()) {
         persistErrorState('weak', error);
@@ -423,33 +434,31 @@ function useFieldProps(props) {
   const yieldAsyncProcess = (0, _react.useCallback)(async _ref5 => {
     let {
       name,
-      waitFor,
-      withValidatedValueOf
+      waitFor
     } = _ref5;
     return new Promise(resolve => {
-      const fulfill = () => {
-        if (typeof withValidatedValueOf === 'undefined' || withValidatedValueOf === validatedWithValue.current) {
-          resolve();
-        }
-      };
-      const hasAsyncProcesses = () => {
-        return waitFor.some(_ref6 => {
+      const validateProcesses = () => {
+        const result = waitFor.some(_ref6 => {
           let {
             processName,
-            withStates
+            withStates,
+            withValue
           } = _ref6;
-          return (processName ? processName === currentAsyncProcessRef.current : true) && withStates.some(state => {
+          const hasMatchingValue = withValue === validatedValue.current;
+          const result = (typeof withValue === 'undefined' ? false : !hasMatchingValue) || (processName ? processName === asyncProcessRef.current : true) && (withStates === null || withStates === void 0 ? void 0 : withStates.some(state => {
             return state === fieldStateRef.current;
-          });
+          }));
+          return result;
         });
+        return result;
       };
-      if (hasAsyncProcesses() === true) {
+      if (validateProcesses() === true) {
         asyncBufferRef.current[name] = {
-          fulfill,
-          hasAsyncProcesses
+          resolve,
+          validateProcesses
         };
       } else {
-        fulfill();
+        resolve();
         setFieldState('pending');
       }
     });
@@ -474,6 +483,7 @@ function useFieldProps(props) {
         }]
       });
     }
+    defineAsyncProcess(undefined);
     if ((result === null || result === void 0 ? void 0 : result.success) === 'saved') {
       setFieldState('success');
     } else if (result !== null && result !== void 0 && result.error) {
@@ -481,7 +491,7 @@ function useFieldProps(props) {
     } else if (asyncBehaviorIsEnabled) {
       setFieldState('complete');
     }
-  }, [asyncBehaviorIsEnabled, persistErrorState, setFieldState, showError, yieldAsyncProcess]);
+  }, [asyncBehaviorIsEnabled, defineAsyncProcess, persistErrorState, setFieldState, showError, yieldAsyncProcess]);
   const setEventResult = (0, _react.useCallback)(result => {
     if (result instanceof Error) {
       result = {
@@ -495,37 +505,43 @@ function useFieldProps(props) {
     if (asyncBehaviorIsEnabled) {
       await yieldAsyncProcess({
         name: 'onChangeContext',
-        withValidatedValueOf: valueRef.current,
         waitFor: [{
           processName: 'validator',
-          withStates: ['validating', 'error']
+          withStates: ['validating', 'error'],
+          withValue: valueRef.current
         }, {
           processName: 'onBlurValidator',
-          withStates: ['validating', 'error']
+          withStates: ['validating', 'error'],
+          withValue: valueRef.current
         }]
       });
     }
     if (path) {
       if ((0, _isAsync.isAsync)(onChangeContext)) {
-        setCurrentAsyncProcess('onChangeContext');
-        setEventResult(await (handlePathChangeDataContext === null || handlePathChangeDataContext === void 0 ? void 0 : handlePathChangeDataContext(path, valueRef.current)));
+        defineAsyncProcess('onChangeContext');
+        if (!hasError()) {
+          setEventResult(await (handlePathChangeDataContext === null || handlePathChangeDataContext === void 0 ? void 0 : handlePathChangeDataContext(path)));
+        } else {
+          setEventResult(null);
+        }
       } else {
-        setEventResult(handlePathChangeDataContext === null || handlePathChangeDataContext === void 0 ? void 0 : handlePathChangeDataContext(path, valueRef.current));
+        setEventResult(handlePathChangeDataContext === null || handlePathChangeDataContext === void 0 ? void 0 : handlePathChangeDataContext(path));
       }
     }
     forceUpdate();
-  }, [asyncBehaviorIsEnabled, path, yieldAsyncProcess, onChangeContext, setCurrentAsyncProcess, setEventResult, handlePathChangeDataContext]);
+  }, [asyncBehaviorIsEnabled, path, hasError, yieldAsyncProcess, onChangeContext, defineAsyncProcess, setEventResult, handlePathChangeDataContext]);
   const updateValue = (0, _react.useCallback)(async newValue => {
     if (newValue === valueRef.current) {
       return;
     }
     valueRef.current = newValue;
+    handlePathChangeUnvalidatedDataContext(path, newValue);
     addToPool('validator', validateValue, (0, _isAsync.isAsync)(validatorRef.current));
     addToPool('onChangeContext', callOnChangeContext, (0, _isAsync.isAsync)(onChangeContext));
     await runPool(() => {
       handleError();
     });
-  }, [addToPool, callOnChangeContext, handleError, onChangeContext, runPool, validateValue]);
+  }, [handlePathChangeUnvalidatedDataContext, path, addToPool, validateValue, callOnChangeContext, onChangeContext, runPool, handleError]);
   const handleChange = (0, _react.useCallback)(async function (argFromInput) {
     let additionalArgs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
     const currentValue = valueRef.current;
@@ -550,20 +566,26 @@ function useFieldProps(props) {
         const args = getArgs();
         await yieldAsyncProcess({
           name: 'onChangeLocal',
-          withValidatedValueOf: args[0],
           waitFor: [{
             processName: 'validator',
-            withStates: ['validating', 'error']
+            withStates: ['validating', 'error'],
+            withValue: args[0]
           }, {
             processName: 'onBlurValidator',
-            withStates: ['validating', 'error']
+            withStates: ['validating', 'error'],
+            withValue: args[0]
           }, {
             processName: 'onChangeContext',
-            withStates: ['pending', 'error']
+            withStates: ['pending', 'error'],
+            withValue: args[0]
           }]
         });
-        setCurrentAsyncProcess('onChangeLocal');
-        setEventResult(await (onChange === null || onChange === void 0 ? void 0 : onChange.apply(_this, args)));
+        defineAsyncProcess('onChangeLocal');
+        if (!hasError()) {
+          setEventResult(await (onChange === null || onChange === void 0 ? void 0 : onChange.apply(_this, args)));
+        } else {
+          setEventResult(null);
+        }
       }, true);
     } else {
       setEventResult(onChange === null || onChange === void 0 ? void 0 : onChange.apply(_this, getArgs()));
@@ -574,7 +596,7 @@ function useFieldProps(props) {
         handleIterateElementChange === null || handleIterateElementChange === void 0 ? void 0 : handleIterateElementChange(iterateValuePath, valueRef.current);
       }
     });
-  }, [addToPool, asyncBehaviorIsEnabled, handleIterateElementChange, hideError, itemPath, iterateElementIndex, onChange, runPool, setCurrentAsyncProcess, setEventResult, updateValue, yieldAsyncProcess]);
+  }, [addToPool, asyncBehaviorIsEnabled, handleIterateElementChange, hasError, hideError, itemPath, iterateElementIndex, onChange, runPool, defineAsyncProcess, setEventResult, updateValue, yieldAsyncProcess]);
   const handleFocus = (0, _react.useCallback)(() => setHasFocus(true), [setHasFocus]);
   const handleBlur = (0, _react.useCallback)(() => setHasFocus(false), [setHasFocus]);
   (0, _useMountEffect.default)(() => {
@@ -626,8 +648,10 @@ function useFieldProps(props) {
   }, [dataContext.data, dataContext.id, path, props.value, updateDataValueDataContext, validateDataDataContext]);
   (0, _react.useEffect)(() => {
     if (dataContext.showAllErrors) {
-      showError();
-      forceUpdate();
+      if (fieldStateRef.current !== 'validating') {
+        showError();
+        forceUpdate();
+      }
     }
   }, [dataContext.showAllErrors, showError]);
   (0, _react.useEffect)(() => {
@@ -724,7 +748,7 @@ function useFieldProps(props) {
     info: !inFieldBlock ? infoRef.current : undefined,
     warning: !inFieldBlock ? warningRef.current : undefined,
     error: !inFieldBlock ? error : undefined,
-    disabled: onBlurValidator && currentAsyncProcessRef.current === 'onBlurValidator' && fieldStateRef.current === 'validating' ? true : disabled,
+    disabled: onBlurValidator && asyncProcessRef.current === 'onBlurValidator' && fieldStateRef.current === 'validating' ? true : disabled,
     fieldState: resolveValidatingState(fieldStateRef.current)
   };
   const sharedData = (0, _useSharedState.useSharedState)(id);