Fix ValidationGroup visited flag not propagating to fields

packages/cx/src/widgets/form/Field.tsx

@@ -312,6 +312,7 @@ export class Field<
     data._readOnly = data.readOnly;
     data._viewMode = data.mode === "view" || data.viewMode;
     data._tabOnEnterKey = data.tabOnEnterKey;
+    data._visited = data.visited;
     data.validationValue = this.getValidationValue(data);
     instance.parentDisabled = context.parentDisabled;
     instance.parentReadOnly = context.parentReadOnly;
@@ -366,7 +367,7 @@ export class Field<
     );
     data.visited = coalesce(
       context.parentStrict ? context.parentVisited : null,
-      data.visited,
+      data._visited,
       context.parentVisited,
     );
 

packages/cx/src/widgets/form/ValidationGroup.spec.tsx

@@ -1,8 +1,9 @@
 import { Store } from "../../data/Store";
 import { ValidationGroup } from "./ValidationGroup";
 import { Validator } from "./Validator";
+import { TextField } from "./TextField";
 import { bind } from "../../ui/bind";
-import { createTestRenderer } from "../../util/test/createTestRenderer";
+import { createTestRenderer, act } from "../../util/test/createTestRenderer";
 
 import assert from "assert";
 
@@ -107,6 +108,34 @@ describe("ValidationGroup", () => {
       assert(visited);
    });
 
+   it("visited flag changes are propagated to fields after being initialized to false", async () => {
+      let widget = (
+         <cx>
+            <ValidationGroup errors={bind("errors")} visited={bind("form.visited")}>
+               <TextField required value={bind("value1")} />
+            </ValidationGroup>
+         </cx>
+      );
+
+      let store = new Store();
+      //initializing the bound value to false used to shadow later updates
+      store.set("form.visited", false);
+
+      const component = await createTestRenderer(store, widget);
+
+      let errors = store.get("errors");
+      assert.equal(errors.length, 1);
+      assert.equal(errors[0].visited, false);
+
+      await act(async () => {
+         store.set("form.visited", true);
+      });
+
+      errors = store.get("errors");
+      assert.equal(errors.length, 1);
+      assert.equal(errors[0].visited, true);
+   });
+
    it("disabled flag can be overruled by the field props", async () => {
       let widget = (
          <cx>