stores: fix hooks and elements

Elements/Input.tsx

@@ -15,7 +15,7 @@ export default function Element({
   return (
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
       <Input
-        defaultValue={value}
+        value={value}
         onChange={(e) => setValue(e.target.value)}
         disabled={status === 'Disabled'}
         {...props}

Elements/InputNumber.tsx

@@ -21,7 +21,7 @@ export default function Element({
   return (
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
       <InputNumber
-        defaultValue={value}
+        value={value}
         onChange={(val) => setValue(val)}
         disabled={status === 'Disabled'}
         parser={parser}

Elements/Radio.tsx

@@ -20,7 +20,7 @@ export default function Element({
   return (
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
       <Radio.Group
-        defaultValue={value}
+        value={value}
         options={options}
         onChange={(e) => setValue(e.target.value)}
         disabled={status === 'Disabled'}

Elements/Select.tsx

@@ -20,7 +20,7 @@ export default function Element({
   return (
     <FormItem hasFeedback validateStatus={isValid === false ? 'error' : ''} help={help}>
       <Select
-        defaultValue={value}
+        value={value}
         onChange={(val) => setValue(val)}
         disabled={status === 'Disabled'}
         loading={status === 'Loading'}

stores/calculation/validation/hooks.js

@@ -9,10 +9,10 @@ export function useValidation(elementName) {
   const validationResult = useMemo(
     () => computed(() => $calculation.$validation.getValidation(elementName)),
     [$calculation.$validation, elementName]
-  );
+  ).get();
 
   return {
-    ...validationResult.get(),
-    help: 'Некорректные данные',
+    ...validationResult,
+    help: validationResult.isValid === false ? 'Некорректные данные' : null,
   };
 }

stores/calculation/values/hooks.js

@@ -1,30 +1,53 @@
-/* eslint-disable import/prefer-default-export */
 import { computed } from 'mobx';
-import { useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useStore } from 'stores/hooks';
 import { useDebouncedCallback } from 'use-debounce';
 
-const DEBOUNCE_DELAY = 350;
+const WAIT = 350;
+const MAX_WAIT = 1500;
 
 export function useValue(valueName) {
+  const [value, setValue] = useState();
+
   const { $calculation } = useStore();
 
+  const setStoreValue = useCallback(
+    (val) => $calculation.$values.setValue(valueName, val),
+    [$calculation.$values, valueName]
+  );
+  const debouncedSetStoreValue = useDebouncedCallback(setStoreValue, WAIT, {
+    maxWait: MAX_WAIT,
+  });
+
+  /** Set local value to global store */
+  useEffect(() => {
+    debouncedSetStoreValue(value);
+  }, [debouncedSetStoreValue, value]);
+
   const storeValue = useMemo(
     () => computed(() => $calculation.$values.getValue(valueName)),
     [$calculation.$values, valueName]
+  ).get();
+
+  /** Set initial value from global store to local state (only once) */
+  useEffect(
+    () => {
+      setValue(storeValue);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
   );
 
-  const setStoreValue = useDebouncedCallback(
-    (value) => $calculation.$values.setValue(valueName, value),
-    DEBOUNCE_DELAY,
-    {
-      maxWait: 2000,
+  /** Get global store value and set it to local state */
+  useEffect(() => {
+    if (!debouncedSetStoreValue.isPending()) {
+      setValue(storeValue);
     }
-  );
+  }, [debouncedSetStoreValue, storeValue]);
 
   return {
-    value: storeValue.get(),
-    setValue: setStoreValue,
+    value,
+    setValue,
   };
 }