Merge pull request #6735 from Budibase/fix/dom-children

Replace incorrect usages of element.childNodes with element.children

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/DNDPositionIndicator.svelte

@@ -16,7 +16,7 @@
     // Get root li element
     const el = document.getElementById(`component-${component?._id}`)
     // Get inner nav item content element
-    const child = el?.childNodes[0]?.childNodes[0]
+    const child = el?.children[0]?.children[0]
     if (!el) {
       return
     }

packages/client/src/components/Component.svelte

@@ -401,7 +401,7 @@
   }
 
   const scrollIntoView = () => {
-    const node = document.getElementsByClassName(id)?.[0]?.childNodes[0]
+    const node = document.getElementsByClassName(id)?.[0]?.children[0]
     if (!node) {
       return
     }

packages/client/src/components/preview/DNDHandler.svelte

@@ -35,8 +35,8 @@
 
   const getDOMNodeForComponent = component => {
     const parent = component.closest(".component")
-    const children = Array.from(parent.childNodes)
-    return children?.find(node => node?.nodeType === 1)
+    const children = Array.from(parent.children)
+    return children[0]
   }
 
   // Callback when initially starting a drag on a draggable component

packages/client/src/components/preview/IndicatorSet.svelte

@@ -71,8 +71,7 @@
     // Extract valid children
     // Sanity limit of 100 active indicators
     const children = Array.from(parents)
-      .map(parent => parent?.childNodes?.[0])
-      .filter(node => node?.nodeType === 1)
+      .map(parent => parent?.children?.[0])
       .slice(0, 100)
 
     // If there aren't any nodes then reset

packages/client/src/components/preview/SettingsBar.svelte

@@ -37,7 +37,7 @@
     }
     const id = $builderStore.selectedComponentId
     const parent = document.getElementsByClassName(id)?.[0]
-    const element = parent?.childNodes?.[0]
+    const element = parent?.children?.[0]
 
     // The settings bar is higher in the dom tree than the selection indicators
     // as we want to be able to render the settings bar wider than the screen,