feat(Forms): add connectWithItemPath to onBlurValidator and `onCh…

…angeValidator` to be used within Iterate (#4518) - Reprod: https://codesandbox.io/p/sandbox/connectwithpath-mgyq8m - Reprod with fix: https://codesandbox.io/p/sandbox/connectwithpath-forked-wwmkn6 - More [info](https://dnb-it.slack.com/archives/CMXABCHEY/p1738065508295549?thread_ts=1737987113.910259&cid=CMXABCHEY).
dnbexperience · Jan 29, 2025 · 321550f · 321550f
1 parent bf784c8
commit 321550f
Show file tree

Hide file tree

Showing 8 changed files with 1,367 additions and 537 deletions.
diff --git a/...es/dnb-design-system-portal/src/docs/uilib/extensions/forms/getting-started.mdx b/...es/dnb-design-system-portal/src/docs/uilib/extensions/forms/getting-started.mdx
@@ -573,7 +573,7 @@ You can find more info about error messages in the [error messages](/uilib/exten
 
 ##### Connect with another field
 
-You can also use the `connectWithPath` function to connect the validator (`onChangeValidator` and `onBlurValidator`) to another field. This allows you to rerun the validator function once the value of the connected field changes:
+You can also use the `connectWithPath` (or `connectWithItemPath` for within [Iterate.Array](/uilib/extensions/forms/Iterate/Array/)) function to connect the validator (`onChangeValidator` and `onBlurValidator`) to another field. This allows you to rerun the validator function once the value of the connected field changes:
 
 ```tsx
 import { Form, Field } from '@dnb/eufemia/extensions/forms'

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/Section.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Section/__tests__/Section.test.tsx
@@ -119,7 +119,7 @@ describe('Form.Section', () => {
             "current": <input
               autocomplete="given-name"
               class="dnb-input__input"
-              id="id-r1i"
+              id="id-r1b"
               name="firstName"
               type="text"
               value=""
@@ -148,7 +148,7 @@ describe('Form.Section', () => {
               aria-required="true"
               autocomplete="family-name"
               class="dnb-input__input"
-              id="id-r1p"
+              id="id-r1h"
               name="lastName"
               type="text"
               value=""

diff --git a/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/GenerateSchema.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/GenerateSchema.test.tsx
@@ -105,7 +105,7 @@ describe('Tools.GenerateSchema', () => {
           "innerRef": {
             "current": <input
               class="dnb-input__input"
-              id="id-rp"
+              id="id-rm"
               name="myField"
               type="text"
               value=""
@@ -127,7 +127,7 @@ describe('Tools.GenerateSchema', () => {
               "current": <input
                 aria-required="true"
                 class="dnb-input__input"
-                id="id-r10"
+                id="id-rs"
                 name="nested/myString"
                 type="text"
                 value="my string"
@@ -168,7 +168,7 @@ describe('Tools.GenerateSchema', () => {
             "current": <input
               aria-required="true"
               class="dnb-input__input"
-              id="id-rp"
+              id="id-rm"
               name="myString"
               type="text"
               value="local value"
@@ -189,7 +189,7 @@ describe('Tools.GenerateSchema', () => {
             "current": <input
               aria-required="true"
               class="dnb-input__input"
-              id="id-rp"
+              id="id-rm"
               name="myString"
               type="text"
               value="local value"

diff --git a/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/ListAllProps.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/ListAllProps.test.tsx
@@ -62,7 +62,7 @@ describe('Tools.ListAllProps', () => {
           "innerRef": {
             "current": <input
               class="dnb-input__input"
-              id="id-ra"
+              id="id-r9"
               name="myField"
               type="text"
               value=""
@@ -84,7 +84,7 @@ describe('Tools.ListAllProps', () => {
               "current": <input
                 aria-required="true"
                 class="dnb-input__input"
-                id="id-rh"
+                id="id-rf"
                 name="nested/myString"
                 type="text"
                 value="my string"
@@ -125,7 +125,7 @@ describe('Tools.ListAllProps', () => {
             "current": <input
               aria-required="true"
               class="dnb-input__input"
-              id="id-ra"
+              id="id-r9"
               name="myString"
               type="text"
               value="local value"
@@ -146,7 +146,7 @@ describe('Tools.ListAllProps', () => {
             "current": <input
               aria-required="true"
               class="dnb-input__input"
-              id="id-ra"
+              id="id-r9"
               name="myString"
               type="text"
               value="local value"
@@ -273,7 +273,7 @@ describe('Tools.ListAllProps', () => {
             "innerRef": {
               "current": <input
                 class="dnb-input__input"
-                id="id-r13"
+                id="id-rv"
                 inputmode="decimal"
                 name="myNumber"
                 type="text"
@@ -295,7 +295,7 @@ describe('Tools.ListAllProps', () => {
             "innerRef": {
               "current": <input
                 class="dnb-input__input"
-                id="id-rs"
+                id="id-rp"
                 name="myString"
                 type="text"
                 value=""
@@ -364,7 +364,7 @@ describe('Tools.ListAllProps', () => {
             "innerRef": {
               "current": <input
                 class="dnb-input__input"
-                id="id-r2h"
+                id="id-r27"
                 inputmode="decimal"
                 name="myNumber"
                 type="text"
@@ -390,7 +390,7 @@ describe('Tools.ListAllProps', () => {
               "innerRef": {
                 "current": <input
                   class="dnb-input__input"
-                  id="id-r22"
+                  id="id-r1q"
                   name="myObject/withString"
                   type="text"
                   value=""
@@ -413,7 +413,7 @@ describe('Tools.ListAllProps', () => {
             "innerRef": {
               "current": <input
                 class="dnb-input__input"
-                id="id-r1r"
+                id="id-r1k"
                 name="myString"
                 type="text"
                 value=""
@@ -470,7 +470,7 @@ describe('Tools.ListAllProps', () => {
                 "innerRef": {
                   "current": <input
                     class="dnb-input__input"
-                    id="id-r30"
+                    id="id-r2k"
                     inputmode="decimal"
                     name="myObject/nested/withNumber"
                     type="text"
@@ -496,7 +496,7 @@ describe('Tools.ListAllProps', () => {
               "innerRef": {
                 "current": <input
                   class="dnb-input__input"
-                  id="id-r2p"
+                  id="id-r2e"
                   name="myObject/withString"
                   type="text"
                   value=""
@@ -562,7 +562,7 @@ describe('Tools.ListAllProps', () => {
                 "current": <input
                   aria-required="true"
                   class="dnb-input__input"
-                  id="id-r3u"
+                  id="id-r3e"
                   inputmode="decimal"
                   name="myObject/withNumber"
                   type="text"
@@ -588,7 +588,7 @@ describe('Tools.ListAllProps', () => {
                 "current": <input
                   aria-required="true"
                   class="dnb-input__input"
-                  id="id-r3f"
+                  id="id-r31"
                   name="myObject/withString"
                   type="text"
                   value=""
@@ -612,7 +612,7 @@ describe('Tools.ListAllProps', () => {
               "current": <input
                 aria-required="true"
                 class="dnb-input__input"
-                id="id-r38"
+                id="id-r2r"
                 name="myString"
                 type="text"
                 value=""
@@ -683,9 +683,9 @@ describe('Tools.ListAllProps', () => {
                   aria-valuenow="0"
                   aria-valuetext="0"
                   class="dnb-input__input"
-                  id="id-r4d"
+                  id="id-r3r"
                   inputmode="decimal"
-                  name="id-r4d"
+                  name="id-r3r"
                   role="spinbutton"
                   step="1"
                   type="text"
@@ -716,9 +716,9 @@ describe('Tools.ListAllProps', () => {
                   aria-valuenow="1"
                   aria-valuetext="1"
                   class="dnb-input__input"
-                  id="id-r4k"
+                  id="id-r41"
                   inputmode="decimal"
-                  name="id-r4k"
+                  name="id-r41"
                   role="spinbutton"
                   step="1"
                   type="text"

diff --git a/...nsions/forms/blocks/ChildrenWithAge/__tests__/__snapshots__/ChildrenWithAge.test.tsx.snap b/...nsions/forms/blocks/ChildrenWithAge/__tests__/__snapshots__/ChildrenWithAge.test.tsx.snap
@@ -15,9 +15,9 @@ exports[`ChildrenWithAge should match snapshot 1`] = `
             aria-placeholder="0"
             aria-required="true"
             class="dnb-input__input"
-            id="id-rj8"
+            id="id-rgo"
             inputmode="numeric"
-            name="id-rj8"
+            name="id-rgo"
             type="text"
           />,
         },
@@ -125,9 +125,9 @@ exports[`ChildrenWithAge should match snapshot 1`] = `
             aria-placeholder="0"
             aria-required="true"
             class="dnb-input__input"
-            id="id-rjf"
+            id="id-rgu"
             inputmode="numeric"
-            name="id-rjf"
+            name="id-rgu"
             type="text"
           />,
         },
@@ -331,7 +331,7 @@ exports[`ChildrenWithAge should match snapshot 1`] = `
         aria-valuenow="2"
         aria-valuetext="2"
         class="dnb-input__input"
-        id="id-riq"
+        id="id-rgc"
         inputmode="numeric"
         name="countChildren"
         role="spinbutton"