bugfix for sticky header with expanded filters

bcgov · Sep 29, 2023 · 5147cea · 5147cea
1 parent 28c1f8d
commit 5147cea
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/frontend/src/app/components/containers/complaints/complaints.tsx b/frontend/src/app/components/containers/complaints/complaints.tsx
@@ -140,7 +140,21 @@ export const Complaints: FC<Props> = ({ defaultComplaintType }) => {
           <Nav.Item
             className="ms-auto"
             {...getToggleProps({
-              onClick: () => setExpanded((prevExpanded) => !prevExpanded),
+                onClick: () => {
+                  const filterElem = document.querySelector("#collapsible-complaints-list-filter-id");
+                  const rect = filterElem?.getBoundingClientRect();
+                  const bottom = rect?.bottom;
+
+                  if({isExpanded}.isExpanded && bottom !== undefined && bottom < 140) //page has been scrolled while filter is open... need to close it!
+                  {
+                    setExpanded((prevExpanded) => !prevExpanded);
+                  }
+                  window.scrollTo({
+                    top: 0,
+                    behavior: "smooth",
+                    });
+                  setExpanded((prevExpanded) => !prevExpanded);
+                },
             })}
           >
             <div

diff --git a/frontend/src/assets/sass/layout.scss b/frontend/src/assets/sass/layout.scss
@@ -15,6 +15,7 @@
   position: sticky !important;
   top: 72px; // Header (72px)
   background-color: $white;
+  z-index: 10000;
 }
 
 .fixed-filter-header {