update Anchor component and Anchor patching to allow for dashboard hash links

src/core/builtins/attributes/modules/components/Anchor.js

@@ -27,6 +27,41 @@ export default builtin => {
       if (!props) {
         return;
       }
+
+      /**
+       * 
+       */
+      if (props.href?.startsWith('#')) {
+        props.onClick = evt => {
+          evt?.persist?.();
+          try {
+            evt.preventDefault();
+            /**
+             * This is bad, but currently it's the only way I really know how to do it.
+             * We're adding a timeout here so that we can give the new route page elements
+             * (topOfElement and scroller) time to load into the DOM.
+             */
+            return setTimeout(() => {
+              const topOfElement = document.querySelector(`#${props.href.substring(1)}`)?.offsetTop;
+              const scroller = document.querySelector('.vz-dashboard-scroller');
+              /**
+               * If the elements don't exist at the check, just load the page normally as if
+               * there was no hash.
+               */
+              if (!topOfElement || !scroller) {
+                return;
+              }
+              /**
+               * Try to set the scroller position to the hash element.
+               */
+              return scroller.scroll({ top: topOfElement - 80, behavior: 'smooth' });
+            }, 250);
+          } catch (err) {
+            return builtin.error(builtin._labels.concat(labels), err);
+          }
+        };
+      }
+
       /**
        * Force Vizality route links open within the app.
        */

src/core/modules/components/Anchor.jsx

@@ -32,7 +32,6 @@ export default memo(({ href, className, userId, children, type, addonId, ...othe
       onClick={async evt => {
         evt?.persist?.();
         try {
-          console.log(href);
           /**
            * 
            */
@@ -44,20 +43,23 @@ export default memo(({ href, className, userId, children, type, addonId, ...othe
            * 
            */
           if (href?.startsWith('#')) {
-            evt.preventDefault();
-            const topOfElement = document.querySelector(`#${href.substring(1)}`)?.offsetTop;
-            const scroller = document.querySelector('.vz-dashboard-scroller');
-            /**
-             * If the elements don't exist at the check, just load the page normally as if
-             * there was no hash.
-             */
-            if (!topOfElement || !scroller) {
-              return;
+            evt?.preventDefault?.();
+            const selector = document.querySelector(`#${href.substring(1)}`);
+            if (selector) {
+              const topOfElement = selector.offsetTop;
+              const scroller = document.querySelector('.vz-dashboard-scroller');
+              /**
+               * If the elements don't exist at the check, just load the page normally as if
+               * there was no hash.
+               */
+              if (!topOfElement || !scroller) {
+                return;
+              }
+              /**
+               * Try to set the scroller position to the hash element.
+               */
+              return scroller.scroll({ top: topOfElement - 80, behavior: 'smooth' });
             }
-            /**
-             * Try to set the scroller position to the hash element.
-             */
-            return scroller.scroll({ top: topOfElement - 30, behavior: 'smooth' });
           }
 
           /**