chore(Forms): clean paths properly when only slash is given as iterat…

…ePath (#4021)

Its an edge case, but when using an array iterator with a `/` slash only
to target an array, fields could end up using `//0/something` as the
path.

packages/dnb-eufemia/src/extensions/forms/hooks/__tests__/usePath.test.tsx

@@ -70,6 +70,24 @@ describe('usePath', () => {
     )
   })
 
+  it('should clean paths properly when "iteratePath" is just a slash', () => {
+    const path = '/path'
+    const iteratePath = '/'
+    const itemPath = '/itemPath'
+    const iterateElementIndex = 0
+    const { result } = renderHook(() => usePath({ path, itemPath }), {
+      wrapper: ({ children }) => (
+        <Iterate.Array path={iteratePath} value={['one']}>
+          {children}
+        </Iterate.Array>
+      ),
+    })
+    expect(result.current.path).toBe(`/${iterateElementIndex}${itemPath}`)
+    expect(result.current.itemPath).toBe(
+      `/${iterateElementIndex}${itemPath}`
+    )
+  })
+
   it('should return a combined path when Iterate is inside Form.Section', () => {
     const path = '/path'
     const sectionPath = '/sectionPath'

packages/dnb-eufemia/src/extensions/forms/hooks/usePath.ts

@@ -25,17 +25,16 @@ export default function usePath(props: Props = {}) {
   }
 
   const joinPath = useCallback((paths: Array<Path>) => {
-    return paths
-      .reduce((acc, cur) => (cur ? `${acc}/${cur}` : acc), '/')
-      .replace(/\/{2,}/g, '/')
-      .replace(/\/+$/, '')
+    return cleanPath(
+      paths.reduce((acc, cur) => (cur ? `${acc}/${cur}` : acc), '/')
+    )
   }, [])
 
   const makeSectionPath = useCallback(
     (path: Path) => {
-      return `${
-        sectionPath && sectionPath !== '/' ? sectionPath : ''
-      }${path}`.replace(/\/$/, '')
+      return cleanPath(
+        `${sectionPath && sectionPath !== '/' ? sectionPath : ''}${path}`
+      )
     },
     [sectionPath]
   )
@@ -51,15 +50,17 @@ export default function usePath(props: Props = {}) {
         root = makeSectionPath('')
       }
 
-      return `${root}${iteratePath || ''}/${iterateElementIndex}${
-        itemPath && itemPath !== '/' ? itemPath : ''
-      }`
+      return cleanPath(
+        `${root}${iteratePath || ''}/${iterateElementIndex}${
+          itemPath || ''
+        }`
+      )
     },
     [
+      itemPathProp,
       iteratePathProp,
       sectionPath,
       iterateElementIndex,
-      itemPathProp,
       makeSectionPath,
     ]
   )
@@ -101,3 +102,9 @@ export default function usePath(props: Props = {}) {
     makeSectionPath,
   }
 }
+
+// Will remove duplicate slashes and trailing slashes
+// /foo///bar/// => /foo/bar
+function cleanPath(path: Path) {
+  return path.replace(/\/+$|\/(\/)+/g, '$1')
+}