From a5191f6644fdf63bbbfdd12faebafbc3a3ab6fd8 Mon Sep 17 00:00:00 2001
From: Jesuye David <jdavid@yext.com>
Date: Tue, 26 Sep 2023 18:02:34 -0400
Subject: [PATCH] move set height from map wrapper to map

---
 static/js/iframe-common.js                    |  2 -
 .../VerticalFullPageMapOrchestrator.js        | 68 +++++++++----------
 .../vertical-full-page-map/markup/map.hbs     |  2 +-
 3 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/static/js/iframe-common.js b/static/js/iframe-common.js
index 5f7c46b60..2919ab1d1 100644
--- a/static/js/iframe-common.js
+++ b/static/js/iframe-common.js
@@ -70,8 +70,6 @@ export function generateIFrame(domain, answersExperienceFrame) {
   iframe.frameBorder = 0;
 
    // For dynamic iFrame sizing
-  iframe.style.height = '100%';
-  iframe.style.minHeight = '100%';
   iframe.style.width = '1px';
   iframe.style.minWidth = '100%';
   iframe.id = 'answers-frame';
diff --git a/static/js/theme-map/VerticalFullPageMapOrchestrator.js b/static/js/theme-map/VerticalFullPageMapOrchestrator.js
index a8cd2ab1c..af7f9fe2e 100644
--- a/static/js/theme-map/VerticalFullPageMapOrchestrator.js
+++ b/static/js/theme-map/VerticalFullPageMapOrchestrator.js
@@ -205,42 +205,42 @@ class VerticalFullPageMapOrchestrator extends ANSWERS.Component {
     });
     this.setupMobileBreakpointListener();
     this.addMapComponent();
-    this.setFixedHeightsOnAndroid();
   }
 
-  /**
-   * On Android browsers, opening up the keyboard will shift the contents of the entire page up,
-   * moving the map center, and thereby causing a searchOnMapMove to be triggered.
-   * The search response would then cause the page to update,
-   * and close the keyboard, making it impossible to actually type anything into the searchbar.
-   * 
-   * Setting a fixed height on elements like .Answers-mapWrapper prevents the keyboard from shifting the content
-   * of the page.
-   */
-   setFixedHeightsOnAndroid() {
-    if (!this.isMobile() || !/Android/i.test(navigator.userAgent)) {
-      return;
-    }
-
-    setFixedHeight('.Answers-mapWrapper')
-
-    function getSingleElement(selector) {
-      const els = document.querySelectorAll(selector);
-      if (els.length === 0) {
-        console.error(`No ${selector} found, unable to set fixed height for the full page map.`);
-      } else if (els.length > 1) {
-        console.error(
-          `Multiple elements for ${selector} found, expected only 1, not setting fixed height for the full page map.`);
-      } else {
-        return els[0];
-      }
-    }
-
-    function setFixedHeight(selector) {
-      const el = getSingleElement(selector)
-      el.style.height = `${el.scrollHeight}px`
-    }
-  }
+  //NOTE: set min-height for js-answersMap instead to prevent keyboard from shifting the page
+  // /**
+  //  * On Android browsers, opening up the keyboard will shift the contents of the entire page up,
+  //  * moving the map center, and thereby causing a searchOnMapMove to be triggered.
+  //  * The search response would then cause the page to update,
+  //  * and close the keyboard, making it impossible to actually type anything into the searchbar.
+  //  * 
+  //  * Setting a fixed height on elements like .Answers-mapWrapper prevents the keyboard from shifting the content
+  //  * of the page.
+  //  */
+  //  setFixedHeightsOnAndroid() {
+  //   if (!this.isMobile() || !/Android/i.test(navigator.userAgent)) {
+  //     return;
+  //   }
+
+  //   setFixedHeight('.Answers-mapWrapper')
+
+  //   function getSingleElement(selector) {
+  //     const els = document.querySelectorAll(selector);
+  //     if (els.length === 0) {
+  //       console.error(`No ${selector} found, unable to set fixed height for the full page map.`);
+  //     } else if (els.length > 1) {
+  //       console.error(
+  //         `Multiple elements for ${selector} found, expected only 1, not setting fixed height for the full page map.`);
+  //     } else {
+  //       return els[0];
+  //     }
+  //   }
+
+  //   function setFixedHeight(selector) {
+  //     const el = getSingleElement(selector)
+  //     el.style.height = `${el.scrollHeight}px`
+  //   }
+  // }
 
   /**
    * Properly set CSS classes for mobile and desktop
diff --git a/templates/vertical-full-page-map/markup/map.hbs b/templates/vertical-full-page-map/markup/map.hbs
index 85cba5151..06aef049a 100644
--- a/templates/vertical-full-page-map/markup/map.hbs
+++ b/templates/vertical-full-page-map/markup/map.hbs
@@ -1 +1 @@
-<div id="js-answersMap" class="Answers-map js-answersMap" dir="ltr"></div>
+<div id="js-answersMap" class="Answers-map js-answersMap" style="min-height:1px" dir="ltr"></div>