Feature/1545 overlap fixes

apps/client/src/components/App.js

@@ -68,8 +68,8 @@ const DRAWER_WIDTH = 250;
 
 // A bunch of styled components to get the Hajk feel! Remember that some
 // components are styled with the sx-prop instead/as well.
-const StyledHeader = styled("header")(({ theme }) => ({
-  zIndex: theme.zIndex.appBar,
+const StyledHeader = styled("header")(({ theme, headerHasFocus }) => ({
+  zIndex: headerHasFocus ? theme.zIndex.appBar : theme.zIndex.appBar - 100,
   maxHeight: theme.spacing(8),
   display: "flex",
   justifyContent: "space-between",
@@ -375,6 +375,7 @@ class App extends React.PureComponent {
       drawerStatic: drawerStatic,
       activeDrawerContent: activeDrawerContentState,
       drawerMouseOverLock: false,
+      headerHasFocus: false,
     };
 
     // If the drawer is set to be visible at start - ensure the activeDrawerContent
@@ -486,6 +487,9 @@ class App extends React.PureComponent {
       .loadPlugins(this.props.activeTools);
 
     Promise.all(promises).then(() => {
+      this.globalObserver.subscribe("core.handleHeaderBlur", () => {
+        this.setState({ headerHasFocus: false });
+      });
       // Track the page view
       this.globalObserver.publish("analytics.trackPageView");
 
@@ -919,7 +923,10 @@ class App extends React.PureComponent {
         <Search
           map={this.appModel.getMap()}
           app={this}
-          options={this.appModel.plugins.search.options} // FIXME: We should get config from somewhere else now when Search is part of Core
+          options={this.appModel.plugins.search.options}
+          headerHasFocus={this.state.headerHasFocus}
+          handleHeaderFocus={this.handleHeaderFocus}
+          // FIXME: We should get config from somewhere else now when Search is part of Core
         />
       );
     } else {
@@ -1080,6 +1087,14 @@ class App extends React.PureComponent {
     return this.state.drawerStatic && isOnlyOneButtonVisible ? false : true;
   }
 
+  handleHeaderFocus = () => {
+    this.setState({ headerHasFocus: true });
+  };
+
+  handleHeaderBlur = () => {
+    this.setState({ headerHasFocus: false });
+  };
+
   render() {
     const { config } = this.props;
 
@@ -1146,6 +1161,8 @@ class App extends React.PureComponent {
                   pointerEvents: "auto",
                 },
               }}
+              headerHasFocus={this.state.headerHasFocus}
+              onFocus={this.handleHeaderFocus}
             >
               {clean === false && this.showDrawerButtons() && (
                 <DrawerToggleButtons
@@ -1266,6 +1283,7 @@ class App extends React.PureComponent {
                 pointerEvents: "auto",
               },
             }}
+            onClick={this.handleHeaderBlur}
           >
             {useNewInfoclick === false && this.renderInfoclickWindow()}
             {useNewInfoclick && (

apps/client/src/components/Search/Search.js

@@ -119,6 +119,8 @@ class Search extends React.PureComponent {
     this.initMapViewModel();
     this.initExportHandlers();
     this.bindSubscriptions();
+    this.headerHasFocus = props.headerHasFocus;
+    this.handleHeaderFocus = props.handleHeaderFocus;
   }
 
   initMapViewModel = () => {
@@ -1087,6 +1089,8 @@ class Search extends React.PureComponent {
           getArrayWithSearchWords={this.getArrayWithSearchWords}
           failedWFSFetchMessage={failedWFSFetchMessage}
           mapViewModel={this.mapViewModel}
+          headerHasFocus={this.headerHasFocus}
+          handleHeaderFocus={this.handleHeaderFocus}
           {...this.props}
         />
       )

apps/client/src/components/Search/SearchBar.js

@@ -55,7 +55,13 @@ const IconWrapper = styled("div")(({ theme }) => ({
 const CustomPopper = (props) => {
   const theme = useTheme();
   const smallScreen = useMediaQuery(theme.breakpoints.down("sm"));
-  const style = smallScreen ? { width: "100%" } : { width: 400 };
+
+  const headerHasFocusZIndex = props.headerhasfocus === "true" ? 1300 : 1000;
+
+  const style = smallScreen
+    ? { width: "100%", zIndex: headerHasFocusZIndex }
+    : { width: 400, zIndex: headerHasFocusZIndex };
+
   return (
     <Popper
       {...props}
@@ -260,6 +266,8 @@ class SearchBar extends React.PureComponent {
       resultPanelCollapsed,
       toggleCollapseSearchResults,
       options,
+      headerHasFocus,
+      handleHeaderFocus,
     } = this.props;
 
     return (
@@ -273,6 +281,8 @@ class SearchBar extends React.PureComponent {
         panelCollapsed={resultPanelCollapsed}
         toggleCollapseSearchResults={toggleCollapseSearchResults}
         options={options}
+        headerHasFocus={headerHasFocus}
+        handleHeaderFocus={handleHeaderFocus}
       />
     );
   };
@@ -286,13 +296,19 @@ class SearchBar extends React.PureComponent {
       loading,
       handleOnAutocompleteInputChange,
       handleSearchInput,
+      handleHeaderFocus,
     } = this.props;
     return (
       <StyledAutocomplete
         id="searchInputField"
         freeSolo
         size={"small"}
-        PopperComponent={CustomPopper}
+        PopperComponent={(popperProps) => (
+          <CustomPopper
+            {...popperProps}
+            headerhasfocus={this.props.headerHasFocus.toString()}
+          />
+        )}
         PaperComponent={CustomPaper}
         clearOnEscape
         disabled={
@@ -317,7 +333,20 @@ class SearchBar extends React.PureComponent {
               // Important: the `key` prop must be set last, so we override the
               // one that gets there when we spread props (there is already a key
               // there, which can become duplicated under some circumstances).
-              <Grid container alignItems="center" {...props} key={props.id}>
+              <Grid
+                container
+                alignItems="center"
+                {...props}
+                key={props.id}
+                onClick={(e) => {
+                  if (handleHeaderFocus) {
+                    handleHeaderFocus();
+                  }
+                  if (props.onClick) {
+                    props.onClick(e);
+                  }
+                }}
+              >
                 <Grid item xs={1}>
                   {this.getOriginBasedIcon(option.origin)}
                 </Grid>
@@ -378,6 +407,8 @@ class SearchBar extends React.PureComponent {
       setSearchSources,
       failedWFSFetchMessage,
       isMobile,
+      handleHeaderFocus,
+      handleHeaderBlur,
     } = this.props;
     const disableUnderline = isMobile ? { disableUnderline: true } : null;
     const showFailedWFSMessage =
@@ -394,6 +425,7 @@ class SearchBar extends React.PureComponent {
     const placeholder = this.getPlaceholder();
     return (
       <TextField
+        onBlur={handleHeaderBlur}
         {...params}
         label={<span style={visuallyHidden}>Sök i webbplatsens innehåll</span>}
         variant={isMobile ? "standard" : "outlined"}
@@ -429,6 +461,9 @@ class SearchBar extends React.PureComponent {
                       onClick={(e) => {
                         e.stopPropagation();
                         toggleCollapseSearchResults();
+                        if (handleHeaderFocus) {
+                          handleHeaderFocus();
+                        }
                       }}
                       size="small"
                     >
@@ -445,6 +480,9 @@ class SearchBar extends React.PureComponent {
                       onClick={(e) => {
                         e.stopPropagation();
                         this.toggleResultsLayerVisibility();
+                        if (handleHeaderFocus) {
+                          handleHeaderFocus();
+                        }
                       }}
                       size="small"
                     >

apps/client/src/components/Search/searchResults/SearchResultsContainer.js

@@ -1063,8 +1063,14 @@ class SearchResultsContainer extends React.PureComponent {
   };
 
   render() {
-    const { app, getOriginBasedIcon, localObserver, panelCollapsed, options } =
-      this.props;
+    const {
+      app,
+      getOriginBasedIcon,
+      localObserver,
+      panelCollapsed,
+      options,
+      handleFocus,
+    } = this.props;
     const {
       sumOfResults,
       activeFeatureCollection,
@@ -1098,17 +1104,18 @@ class SearchResultsContainer extends React.PureComponent {
     return (
       <Collapse in={!panelCollapsed}>
         {sumOfResults === null ? null : sumOfResults === 0 ? (
-          <StyledPaper>
+          <StyledPaper onMouseDown={handleFocus}>
             <Alert severity="warning">Sökningen gav inget resultat.</Alert>
           </StyledPaper>
         ) : (
-          <StyledPaper>
+          <StyledPaper onMouseDown={handleFocus}>
             <ResultListWrapper container>
               {this.renderSearchResultsHeader()}
               {filterInputFieldOpen && this.renderFilterInputField()}
               {this.renderSortingMenu()}
               <Grid item xs={12}>
                 <SearchResultsList
+                  onClick={handleFocus}
                   localObserver={localObserver}
                   getOriginBasedIcon={getOriginBasedIcon}
                   featureCollections={collectionsToRender}

apps/client/src/components/Window.js

@@ -99,8 +99,9 @@ Rnd.prototype.onDragStart = function (e, data) {
     return;
   }
   const boundaryRect = boundary.getBoundingClientRect();
+  const headerRect = document.getElementById("header").getBoundingClientRect();
   const boundaryLeft = boundaryRect.left;
-  const boundaryTop = boundaryRect.top;
+  const boundaryTop = boundaryRect.top + headerRect.top + headerRect.height;
   const parentRect = parent.getBoundingClientRect();
   const parentLeft = parentRect.left;
   const parentTop = parentRect.top;
@@ -172,6 +173,7 @@ class Window extends React.PureComponent {
 
   componentDidUpdate = (prevProps, prevState) => {
     if (prevProps.open === false && this.props.open === true) {
+      this.bringToFront();
       //This is ugly but there is a timing problem further down somewhere (i suppose?).
       //componentDidUpdate is run before the render is actually fully completed and the DOM is ready
       setTimeout(() => {
@@ -400,6 +402,8 @@ class Window extends React.PureComponent {
   };
 
   bringToFront() {
+    this.props.globalObserver.publish("core.handleHeaderBlur");
+
     document.windows
       .sort((a, b) => (a === this ? 1 : b === this ? -1 : 0))
       .forEach((w, i) => {
@@ -477,7 +481,6 @@ class Window extends React.PureComponent {
       }
     }
 
-    this.bringToFront();
     return (
       <StyledRnd
         className="hajk-window"