isTouched.

Author: DovydasNavickas

src/app.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, ErrorInfo } from "react";
 import ReactDOM from "react-dom";
-import { TextField } from "./components/text-field";
 import { GroupStoreMutable } from "./stores/group-store";
 import { GroupContext, GroupContextObject } from "./contexts/group-context";
 import { useForceUpdate } from "./force-update";

src/components/text-field.tsx

@@ -51,10 +51,12 @@ function useField(props: TextFieldProps): FieldResult {
                 return;
             }
 
-            // Initial update is skipped, because field is registered during first render and
-            // store listener is added asynchronously. The change action is emitted in-between.
             setCurrentValue(field.currentValue);
         };
+
+        // Initial update is skipped, because field is registered during first render and
+        // store listener is added asynchronously. The change action is emitted in-between.
+        // Thus, a manual update is needed.
         storeUpdated();
 
         store.addListener(storeUpdated);
@@ -73,14 +75,8 @@ function useField(props: TextFieldProps): FieldResult {
         fieldProps: {
             value: currentValue,
             onChange: event => store.updateValue(fieldId, event.target.value),
-            onFocus: () => {
-                console.log(`Field '${fieldId}' has been focused.`);
-                store.focus(fieldId);
-            },
-            onBlur: () => {
-                console.log(`Field '${fieldId}' has been blurred.`);
-                store.blur(fieldId);
-            }
+            onFocus: () => store.focus(fieldId),
+            onBlur: () => store.blur(fieldId)
         }
     };
 }

src/stores/group-store.ts

@@ -84,6 +84,11 @@ export class GroupStoreMutable extends TinyEmitter<Callback> {
             if (field == null) {
                 return;
             }
+
+            // Value equality check should be abstracted for particular component and value type
+            if (field.currentValue !== value) {
+                field.isTouched = true;
+            }
             field.currentValue = value;
         });
 

tsconfig.json

@@ -4,6 +4,7 @@
         "jsx": "react",
         "strict": true,
         "esModuleInterop": true,
+        "strictNullChecks": true,
         "plugins": [
             {
                 "name": "tslint-language-service",