DP-19870: Fix scroll issue with off screen menu button scrolling to the top before moving to correct location

patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js

@@ -35,11 +35,15 @@ let hamburgerMenuAlertScrolling = function() {
 
     if (utilNavNarrowCheck() !== false) {
       paddingTarget = utilNarrowNav;
+      if (width < 841) {
+        paddingTarget.style.paddingBottom = "80px";
+      }
       hamburgerMainNav.style.paddingBottom = 0;
     }
-
-    // Add bottom padding when function is initially called.
-    paddingTarget.style.paddingBottom = alertHeight + hamburgerMenuTop + "px";
+    else {
+      // Add bottom padding when function is initially called.
+      paddingTarget.style.paddingBottom = alertHeight + hamburgerMenuTop + "px";
+    }
 
     // Add bottom padding when alert style changes occur.
     const alertObserver = new MutationObserver(function(mutations) {
@@ -61,6 +65,9 @@ let hamburgerMenuAlertScrolling = function() {
           if (currentDisplayValue === oldDisplayValue) {
             alertHeight = document.querySelector(".ma__emergency-alerts").clientHeight;
             paddingTarget.style.paddingBottom = alertHeight + hamburgerMenuTop + "px";
+            if (width < 841) {
+              paddingTarget.style.paddingBottom = "80px";
+            }
           }
         }
       });
@@ -70,6 +77,7 @@ let hamburgerMenuAlertScrolling = function() {
       attributeFilter: ["style"],
       attributeOldValue: true
     });
+
   }
 };
 
@@ -634,40 +642,14 @@ function commonCloseMenuTasks() {
 function openMenu() {
   commonOpenMenuTasks();
   menuButton.setAttribute("aria-pressed", "true");
-  let alertsInterface = document.querySelector('.ma__emergency-alerts__interface');
-  if (alertsInterface !== null) {
+  let alertsHeader = document.querySelector('.ma__emergency-alerts__header');
+  if (alertsHeader !== null) {
     let emergencyAlerts = document.querySelector(".ma__emergency-alerts");
-    let scrollOffset = emergencyAlerts.offsetHeight - (alertsInterface.offsetHeight/1.5);
-
-
+    let scrollOffset = emergencyAlerts.offsetHeight - (alertsHeader.offsetHeight/2);
     if (navigator.userAgent.match(/iPad|iPhone|iPod|Android|Windows Phone/i)) {
-      function customScrollTo(to, duration) {
-        var start = 0,
-            change = to - start,
-            currentTime = 0,
-            increment = 20;
-
-        var animateScroll = function(){
-          currentTime += increment;
-          var val = Math.easeInOutQuad(currentTime, start, change, duration);
-          window.scrollTo(0,val);
-
-          if(currentTime < duration) {
-            setTimeout(animateScroll, increment);
-          }
-        };
-        animateScroll();
-      }
-
-      Math.easeInOutQuad = function (t, b, c, d) {
-        t /= d/2;
-        if (t < 1) return c/2*t*t + b;
-        t--;
-        return -c/2 * (t*(t-2) - 1) + b;
-      };
-
       customScrollTo(scrollOffset, 250);
-    } else {
+    }
+    else {
       window.scrollTo({
         top: scrollOffset,
         left: 0,
@@ -713,48 +695,13 @@ function jumpToSearch(e) {
     searchInput.focus();
   } else {
     hamburgerMenuContainer.removeAttribute("aria-hidden");
-    commonOpenMenuTasks();
-    jumpToSearchButton.setAttribute("aria-pressed", "true");
-    // Set focus on the search input field.
-    if (osInfo.indexOf("iPhone") !== -1) {
-      // Set up a temp input to display onscreen keyboard.
-      const __tempEl = document.createElement("input");
-      document.body.appendChild(__tempEl);
-      __tempEl.classList.add("ma__visually-hidden");
-      __tempEl.focus();
-
-      setTimeout(function timeoutFunction() {
-        searchInput.setAttribute("autofocus", "");
-        // Setting focus on the search box twice. Both are necessary to make it work.
-        searchInput.focus();
-        // Remove the temp input.
-        // Timings are set differently per version to minimize the awekwardness by delay.
-        if (osInfo.indexOf("OS 12") !== -1) {
-          setTimeout(function removeTempInput() {
-            cleanUpTemp();
-          }, 300);
-        } else if (osInfo.indexOf("OS 11") !== -1) {
-          setTimeout(function removeTempInput() {
-            cleanUpTemp();
-          }, 170);
-        } else {
-          setTimeout(function removeTempInput() {
-            cleanUpTemp();
-          }, 70);
-        }
-
-        function cleanUpTemp() {
-          searchInput.focus();
-          document.body.removeChild(__tempEl);
-        }
-      }, 70);
-    }
-    else {
-      setTimeout(function timeoutFunction() {
-        searchInput.setAttribute("autofocus", "");
-        searchInput.focus();
-      }, 70);
-    }
+    openMenu();
+    setTimeout(function timeoutFunction() {
+      console.log('search timeout clicked');
+      jumpToSearchButton.setAttribute("aria-pressed", "true");
+      searchInput.setAttribute("autofocus", "");
+      searchInput.focus();
+    }, 100);
   }
 }
 
@@ -808,10 +755,15 @@ if (null !== menuOverlay) {
 let debouncer;
 window.addEventListener("resize", function () {
   clearTimeout(debouncer);
-  debouncer = setTimeout( () => {
-    closeMenu();
-    hamburgerMenuAlertScrolling();
-  }, 100);
+  const osInfo = navigator.appVersion;
+  // On Android devices resize event is triggered when keyboard appears
+  // and it closes the menu.
+  if (osInfo.indexOf("Android") === -1) {
+    debouncer = setTimeout(() => {
+      closeMenu();
+      hamburgerMenuAlertScrolling();
+    }, 100);
+  }
 });
 
 
@@ -966,3 +918,28 @@ function closeSubMenu() {
     }, 700);
   }
 }
+
+function customScrollTo(to, duration) {
+  var start = window.scrollY,
+      change = to - start,
+      currentTime = 0,
+      increment = 20;
+
+  var animateScroll = function(){
+    currentTime += increment;
+    var val = Math.easeInOutQuad(currentTime, start, change, duration);
+    window.scrollTo(0,val);
+
+    if(currentTime < duration) {
+      setTimeout(animateScroll, increment);
+    }
+  };
+  animateScroll();
+}
+
+Math.easeInOutQuad = function (t, b, c, d) {
+  t /= d/2;
+  if (t < 1) return c/2*t*t + b;
+  t--;
+  return -c/2 * (t*(t-2) - 1) + b;
+};