Bugfix: search input on iOS (#132)

* updated meta viewport tag: added width=device-width * hide/reveal non-active slides to fix iOS bug with soft keyboard * set address input font-size to min of 16px to address iOS soft keyboard bug * updated slides styles: use position fixed for slides container (simplifies CSS & slides layout)
clhenrick · Dec 28, 2023 · 1dccd5d · 1dccd5d
1 parent a92a4f9
commit 1dccd5d
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 20 deletions.
diff --git a/app/public/index.html b/app/public/index.html
@@ -7,7 +7,7 @@
       <meta name="apple-mobile-web-app-status-bar-style" content="black">
       <title>Am I Rent Stabilized?</title>
       <meta name="description" content="Find out if your NYC apartment is rent stabilized!">
-      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
+      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
       <link href='//fonts.googleapis.com/css?family=Oxygen:400,700,300' rel='stylesheet' type='text/css'>
       <link rel="shortcut icon" href="assets/favicon/favicon.png"/>
       <script src="//use.typekit.net/emf7xrp.js"></script>

diff --git a/app/src/components/addressSearchForm.js b/app/src/components/addressSearchForm.js
@@ -20,6 +20,18 @@ import {
 const INPUT_THROTTLE_MS = 350;
 const MIN_SEARCH_TEXT_LENGTH = 1;
 
+// NOTE: this fixes a bug (#131) caused by the virtual keyboard on mobile devices
+const hideOrRevealNonActiveSlides = (hide) => {
+  const slides = [...document.querySelectorAll(".slide")];
+  slides.forEach((slide) => {
+    if (!slide.classList.contains("active")) {
+      // hide all non-active slides so that the address input remains in the visual viewport when the virtual keyboard appears
+      // unhide all non-active slides when ready to resume slide navigation so that things work as normally
+      hide ? slide.classList.add("hidden") : slide.classList.remove("hidden");
+    }
+  });
+};
+
 export class AddressSearchForm extends Component {
   constructor(props) {
     super(props);
@@ -46,6 +58,7 @@ export class AddressSearchForm extends Component {
       INPUT_THROTTLE_MS,
       { leading: true }
     );
+    this.handleFocus = this.handleFocus.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleAGChange = this.handleAGChange.bind(this);
     this.handleRSChange = this.handleRSChange.bind(this);
@@ -72,17 +85,24 @@ export class AddressSearchForm extends Component {
   bindEvents() {
     this.element.addEventListener("submit", this.handleSubmit);
     this.inputAddress.addEventListener("input", this.handleInputChange);
+    this.inputAddress.addEventListener("focus", this.handleFocus);
   }
 
   removeEvents() {
     this.element.removeEventListener("submit", this.handleSubmit);
     this.inputAddress.removeEventListener("input", this.handleInputChange);
+    this.inputAddress.removeEventListener("focus", this.handleFocus);
+  }
+
+  handleFocus() {
+    hideOrRevealNonActiveSlides(true);
   }
 
   handleSubmit(event) {
     event.preventDefault();
     this.handleInputChange.cancel();
     this.clearCachedSearchResult();
+    hideOrRevealNonActiveSlides(false);
 
     if (this.inputAddress.value.length) {
       this.searchRentStabilized(this.inputAddress.value);

diff --git a/app/src/scss/_address_form.scss b/app/src/scss/_address_form.scss
@@ -26,10 +26,6 @@
       position: center 90%;
     }
 
-    &.es {
-      font-size: 0.75em;
-    }
-
     &.invalid {
       border: 3px dashed $valError;
     }
@@ -62,10 +58,7 @@
     input {
       &.address-input {
         height: 60px;
-
-        &.es {
-          font-size: 0.85em;
-        }
+        font-size: 16px;
       }
     }
 

diff --git a/app/src/scss/_slides.scss b/app/src/scss/_slides.scss
@@ -1,10 +1,12 @@
 .slides {
-  position: absolute;
-  top: 60px;
+  position: fixed;
+  top: $nav-main-height;
+  bottom: 0;
   width: 960px;
-  left: 53.776041666667%;
-  margin-left: -516.25px;
-  height: calc(100% - #{$nav-main-height});
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
   overflow: hidden;
   z-index: 10;
   background-color: #fff;
@@ -15,12 +17,6 @@
     margin: 0;
   }
 
-  @include responsive(small-screens) {
-    width: 100%;
-    left: 0;
-    margin: 0;
-  }
-
   @include responsive_mobile_landscape() {
     display: none;
   }