Make TopbarSearchForm work without fixed positioning and onBlur function

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,

src/containers/Topbar/Topbar.css

@@ -90,7 +90,7 @@
 .searchContainer {
   position: relative;
   height: 100%;
-  margin-top: 72px;
+  margin-top: 94px;
 }
 
 .mobileHelp {

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;
 }

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>