From ea839363bd250428f7e16cb1d167b41d38f743bc Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Thu, 8 Jun 2017 15:01:38 +0300
Subject: [PATCH] Make TopbarSearchForm work without fixed positioning and
 onBlur function

---
 .../LocationAutocompleteInput.js              |  4 ++-
 src/containers/Topbar/Topbar.css              |  2 +-
 .../TopbarSearchForm/TopbarSearchForm.css     | 31 ++++++++++++-------
 .../TopbarSearchForm/TopbarSearchForm.js      |  5 +--
 4 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.js b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.js
index 05adc702..04ae3cdc 100644
--- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.js
+++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.js
@@ -334,7 +334,7 @@ class LocationAutocompleteInput extends Component {
   }
 
   handleOnBlur() {
-    if (!this.state.selectionInProgress) {
+    if (this.props.closeOnBlur && !this.state.selectionInProgress) {
       this.finalizeSelection();
     }
   }
@@ -434,6 +434,7 @@ class LocationAutocompleteInput extends Component {
 
 LocationAutocompleteInput.defaultProps = {
   autoFocus: false,
+  closeOnBlur: true,
   rootClassName: null,
   className: null,
   iconClassName: null,
@@ -446,6 +447,7 @@ LocationAutocompleteInput.propTypes = {
   autoFocus: bool,
   rootClassName: string,
   className: string,
+  closeOnBlur: bool,
   iconClassName: string,
   inputClassName: string,
   predictionsClassName: string,
diff --git a/src/containers/Topbar/Topbar.css b/src/containers/Topbar/Topbar.css
index 1bc396d3..a38ca3b0 100644
--- a/src/containers/Topbar/Topbar.css
+++ b/src/containers/Topbar/Topbar.css
@@ -90,7 +90,7 @@
 .searchContainer {
   position: relative;
   height: 100%;
-  margin-top: 72px;
+  margin-top: 94px;
 }
 
 .mobileHelp {
diff --git a/src/containers/TopbarSearchForm/TopbarSearchForm.css b/src/containers/TopbarSearchForm/TopbarSearchForm.css
index 771bdb05..23d40b79 100644
--- a/src/containers/TopbarSearchForm/TopbarSearchForm.css
+++ b/src/containers/TopbarSearchForm/TopbarSearchForm.css
@@ -2,16 +2,26 @@
 
 :root {
   --inputHeight: 50px;
-  --topbarHeight: 72px;
+  --topbarMargin: 94px;
+  --bottomBorder: 3px;
+  --mobilePredictionTop: calc(var(--topbarMargin) + var(--inputHeight) - var(--bottomBorder));
 }
 
 .mobileInputRoot {
-  margin-left: 24px;
-  margin-right: 24px;
+  width: 100%;
 }
 
 .desktopInputRoot {
-  height: var(--topbarHeight);
+  height: var(--topbarMargin);
+}
+
+
+.mobileIcon {
+  margin-left: 24px;
+}
+
+.mobileInput {
+  margin-right: 24px;
 }
 
 .desktopIcon {
@@ -19,21 +29,20 @@
 }
 
 .desktopInput {
-  height: var(--topbarHeight);
+  height: var(--topbarMargin);
   border: none;
   padding-top: 0;
-  padding-bottom: 3px;
+  padding-bottom: var(--bottomBorder);
 }
 
 .mobilePredictions {
-  position: fixed;
-  top: 113px;
+  position: absolute;
+  top: calc(var(--inputHeight) - var(--bottomBorder));
   left: 0;
-  right: 0;
-  bottom: 0;
+  min-height: calc(100vh - var(--mobilePredictionTop));
 }
 
 .desktopPredictions {
-  margin-top: calc(var(--topbarHeight) - var(--inputHeight));
+  margin-top: calc(var(--topbarMargin) - var(--inputHeight));
   max-width: 434px;
 }
diff --git a/src/containers/TopbarSearchForm/TopbarSearchForm.js b/src/containers/TopbarSearchForm/TopbarSearchForm.js
index 27c1a00f..2d30c689 100644
--- a/src/containers/TopbarSearchForm/TopbarSearchForm.js
+++ b/src/containers/TopbarSearchForm/TopbarSearchForm.js
@@ -31,12 +31,13 @@ const TopbarSearchFormComponent = props => {
         name="location"
         label="Location"
         className={isMobile ? css.mobileInputRoot : css.desktopInputRoot}
-        iconClassName={isMobile ? null : css.desktopIcon}
-        inputClassName={isMobile ? null : css.desktopInput}
+        iconClassName={isMobile ? css.mobileIcon : css.desktopIcon}
+        inputClassName={isMobile ? css.mobileInput : css.desktopInput}
         predictionsClassName={isMobile ? css.mobilePredictions : css.desktopPredictions}
         placeholder={intl.formatMessage({ id: 'TopbarSearchForm.placeholder' })}
         format={null}
         component={LocationAutocompleteInput}
+        closeOnBlur={!isMobile}
         onChange={onChange}
       />
     </form>