Unset topbar z-index while filter modal is open

src/components/SearchFiltersMobile/SearchFiltersMobile.css

@@ -8,10 +8,10 @@
   /* sticky result summary in mobile */
   position: sticky;
   top: 0;
-  z-index: 11;
+  z-index: 1;
 }
 
-.searchResultSummaryMobile {
+.searchResultSummary {
   @apply --marketplaceH3FontStyles;
   margin-top: 6px;
 

src/components/SearchFiltersMobile/SearchFiltersMobile.js

@@ -28,6 +28,8 @@ class SearchFiltersMobileComponent extends Component {
       showAsModalMaxWidth,
       onMapIconClick,
       onManageDisableScrolling,
+      onOpenModal,
+      onCloseModal,
       history,
       intl,
     } = this.props;
@@ -47,6 +49,7 @@ class SearchFiltersMobileComponent extends Component {
 
     // Open filters modal, set the initial parameters to current ones
     const openFilters = () => {
+      onOpenModal();
       this.setState({ isFiltersOpenOnMobile: true, initialQueryParams: urlQueryParams });
     };
 
@@ -60,11 +63,13 @@ class SearchFiltersMobileComponent extends Component {
           this.state.initialQueryParams
         )
       );
+      onCloseModal();
       this.setState({ isFiltersOpenOnMobile: false, initialQueryParams: null });
     };
 
     // Close the filter modal
     const closeFilters = () => {
+      onCloseModal();
       this.setState({ isFiltersOpenOnMobile: false });
     };
 
@@ -157,6 +162,8 @@ SearchFiltersMobileComponent.defaultProps = {
   className: null,
   resultsCount: null,
   searchingInProgress: false,
+  onOpenModal: null,
+  onCloseModal: null,
 };
 
 SearchFiltersMobileComponent.propTypes = {
@@ -169,6 +176,8 @@ SearchFiltersMobileComponent.propTypes = {
   showAsModalMaxWidth: number.isRequired,
   onMapIconClick: func.isRequired,
   onManageDisableScrolling: func.isRequired,
+  onOpenModal: func,
+  onCloseModal: func,
 
   // from injectIntl
   intl: intlShape.isRequired,

src/components/SelectSingleFilterMobile/SelectSingleFilterMobile.js

@@ -22,7 +22,7 @@ class SelectSingleFilterMobileComponent extends Component {
       intl,
     } = this.props;
 
-    const selectOption = (option) => {
+    const selectOption = option => {
       onSelect(customAttribute, option);
     };
 

src/containers/SearchPage/SearchPage.css

@@ -4,6 +4,12 @@
   --containerHeight: calc(100vh - var(--topbarHeightDesktop));
 }
 
+/* Can be given to Topbar when a modal is opened
+ * so that the Topbar is not rendered on top of it.*/
+.topbarBehindModal {
+  z-index: initial;
+}
+
 .topbar {
   @media (--viewportMedium) {
     position: fixed;

src/containers/SearchPage/SearchPage.js

@@ -54,6 +54,7 @@ export class SearchPageComponent extends Component {
 
     this.state = {
       isSearchMapOpenOnMobile: props.tab === 'map',
+      isMobileModalOpen: false,
     };
 
     // Initiating map creates 'bounds_changes' event
@@ -66,6 +67,8 @@ export class SearchPageComponent extends Component {
 
     this.onIdle = debounce(this.onIdle.bind(this), SEARCH_WITH_MAP_DEBOUNCE);
     this.fetchMoreListingsToMap = this.fetchMoreListingsToMap.bind(this);
+    this.onOpenMobileModal = this.onOpenMobileModal.bind(this);
+    this.onCloseMobileModal = this.onCloseMobileModal.bind(this);
   }
 
   componentDidMount() {
@@ -158,6 +161,18 @@ export class SearchPageComponent extends Component {
       });
   }
 
+  // Invoked when a modal is opened from a child component,
+  // for example when a filter modal is opened in mobile view
+  onOpenMobileModal() {
+    this.setState({ isMobileModalOpen: true });
+  }
+
+  // Invoked when a modal is closed from a child component,
+  // for example when a filter modal is opened in mobile view
+  onCloseMobileModal() {
+    this.setState({ isMobileModalOpen: false });
+  }
+
   render() {
     const {
       intl,
@@ -252,6 +267,12 @@ export class SearchPageComponent extends Component {
       this.setState({ isSearchMapOpenOnMobile: true });
     };
 
+    // Set topbar class based on if a modal is open in
+    // a child component
+    const topbarClasses = this.state.isMobileModalOpen
+      ? classNames(css.topbarBehindModal, css.topbar)
+      : css.topbar;
+
     // N.B. openMobileMap button is sticky.
     // For some reason, stickyness doesn't work on Safari, if the element is <button>
     /* eslint-disable jsx-a11y/no-static-element-interactions */
@@ -268,7 +289,7 @@ export class SearchPageComponent extends Component {
           mainEntity: [schemaMainEntity],
         }}
       >
-        <TopbarContainer className={css.topbar} />
+        <TopbarContainer className={topbarClasses} />
         <div className={css.container}>
           <div className={css.searchResultContainer}>
             <SearchFilters
@@ -291,6 +312,8 @@ export class SearchPageComponent extends Component {
               showAsModalMaxWidth={MODAL_BREAKPOINT}
               onMapIconClick={onMapIconClick}
               onManageDisableScrolling={onManageDisableScrolling}
+              onOpenModal={this.onOpenMobileModal}
+              onCloseModal={this.onCloseMobileModal}
             />
             <div
               className={classNames(css.listings, {

src/containers/SearchPage/__snapshots__/SearchPage.test.js.snap

@@ -38,8 +38,10 @@ exports[`SearchPageComponent matches snapshot 1`] = `
       />
       <InjectIntl(withRouter(SearchFiltersMobileComponent))
         listingsAreLoaded={true}
+        onCloseModal={[Function]}
         onManageDisableScrolling={[Function]}
         onMapIconClick={[Function]}
+        onOpenModal={[Function]}
         resultsCount={22}
         searchInProgress={false}
         searchListingsError={null}