isFocused, isTouched.

Author: DovydasNavickas

src/components/reset.tsx

@@ -34,10 +34,6 @@ function useField(props: TextFieldProps): FieldResult {
 
     const fieldId = store.generateFieldId(props.name, groupId);
 
-    const onChange: React.ChangeEventHandler<HTMLInputElement> = event => {
-        store.updateValue(fieldId, event.target.value);
-    };
-
     useEffect(() => {
         if (defaultValue == null) {
             defaultValue = "";
@@ -54,6 +50,9 @@ function useField(props: TextFieldProps): FieldResult {
             if (field == null) {
                 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);
         };
         storeUpdated();
@@ -66,13 +65,22 @@ function useField(props: TextFieldProps): FieldResult {
             // Then, unregister field.
             store.unregisterField(fieldId);
         };
-    }, []);
+    }, [props.name, groupId, defaultValue, initialValue]);
+
     return {
         fieldId: fieldId,
         store: store,
         fieldProps: {
             value: currentValue,
-            onChange: onChange
+            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);
+            }
         }
     };
 }

src/components/text-field.tsx

@@ -1,14 +1,18 @@
 import { TinyEmitter, Callback } from "../helpers/emitter";
-import produce from "immer";
+import { produce } from "immer";
 
 export const SEPARATOR = ".";
 
 interface Field {
     id: string;
     name: string;
+
     defaultValue?: string;
     initialValue?: string;
     currentValue: string;
+
+    isFocused: boolean;
+    isTouched: boolean;
 }
 
 type Fields = {
@@ -47,7 +51,9 @@ export class GroupStoreMutable extends TinyEmitter<Callback> {
             name: name,
             defaultValue: defaultValue,
             initialValue: initialValue,
-            currentValue: initialValue || defaultValue
+            currentValue: initialValue || defaultValue,
+            isFocused: false,
+            isTouched: false
         };
 
         this.fields = produce(this.fields, fields => {
@@ -84,6 +90,37 @@ export class GroupStoreMutable extends TinyEmitter<Callback> {
         this.emit();
     }
 
+    public focus(fieldId: string): void {
+        this.setFocused(fieldId, true);
+        this.emit();
+    }
+
+    public blur(fieldId: string): void {
+        this.setFocused(fieldId, false);
+        this.emit();
+    }
+
+    private setFocused(fieldId: string, isFocused: boolean): void {
+        console.log(`Setting focus for field '${fieldId}' to ${isFocused}`);
+        if (this.fields[fieldId] == null) {
+            throw new Error(
+                `Cannot update non-existent field value. (field id '${fieldId}').`
+            );
+        }
+        this.fields = produce(this.fields, fields => {
+            const field = fields[fieldId];
+            if (field == null) {
+                return;
+            }
+            field.isFocused = isFocused;
+
+            // If the field is not touched yet and got focused, make it touched.
+            if (!field.isTouched && isFocused) {
+                field.isTouched = true;
+            }
+        });
+    }
+
     public toObject(): unknown {
         const result: { [key: string]: unknown } = {};
         for (const key in this.fields) {