Enhancement/projects more filter

frontend/src/views/project.js

@@ -21,6 +21,13 @@ import { useOnClickOutside } from '../hooks/UseOnClickOutside';
 
 const smallScreenSize = 960;
 
+// returns true if the element or one of its parents has the classname
+function hasSomeParentClass(element, classname) {
+  if (typeof element.className === 'string' && element.className.split(' ').indexOf(classname) >= 0)
+    return true;
+  return element.parentNode && hasSomeParentClass(element.parentNode, classname);
+}
+
 const ProjectCreate = React.lazy(() => import('../components/projectCreate/index'));
 
 export const CreateProject = () => {
@@ -46,10 +53,11 @@ export const ProjectsPage = () => {
   } = useProjectsQuery(fullProjectsQuery, action, {
     // prevent api call until the filters are applied
     enabled: !pathname.includes('/explore/filters/'),
+    cacheTime: 0,
   });
 
   return (
-    <div className="pull-center">
+    <div className="pull-center" id="projects-container">
       <ProjectNav>
         <Outlet />
       </ProjectNav>
@@ -152,25 +160,27 @@ export const ProjectsPageIndex = (props) => {
 
 export const MoreFilters = () => {
   const [position, setPosition] = useState({ top: 0, left: 0, height: 0, width: 0 });
+  const [projectContainerHeight, setProjectContainerHeight] = useState({ height: 0 });
+  const [scrollHeight, setScrollHeight] = useState(0);
   const navigate = useNavigate();
   const [fullProjectsQuery] = useExploreProjectsQueryParams();
   const [componentHeight, setComponentHeight] = useState(`${window.innerHeight}px`);
   const filterElement = document?.getElementById('more-filter-id');
+  const projectContainerElement = document?.getElementById('projects-container');
   const [width] = useWindowSize();
 
-  useEffect(() => {
-    document.body.style.overflow = 'hidden';
-    return () => {
-      document.body.style.overflow = 'auto';
-    };
-  }, []);
-
   // calculate position of more filter button for layout
   useLayoutEffect(() => {
-    if (!filterElement) return;
+    if (!filterElement || !projectContainerElement) return;
+
     const { top, left, height, width } = filterElement.getBoundingClientRect();
+    const { height: containerHeight } = projectContainerElement.getBoundingClientRect();
+    setScrollHeight(window.scrollY);
+    setProjectContainerHeight(containerHeight);
     setPosition({ top, left, height, width });
-  }, [filterElement, width]);
+  }, [filterElement, width, projectContainerElement]);
+
+  console.log(scrollHeight, 'scroll height');
 
   useEffect(() => {
     const contentHeight =
@@ -196,7 +206,13 @@ export const MoreFilters = () => {
   const moreFilterRef = useRef(null);
 
   useOnClickOutside(moreFilterRef, (e) => {
-    if (e.target.id === 'more-filter-id') return;
+    const clickedElement = e.target;
+    const isClearSelectButton = hasSomeParentClass(clickedElement, 'react-select__clear-indicator');
+    if (
+      e.target.id === 'more-filter-id' ||
+      isClearSelectButton //prevent popup close on clicking clear button of select component
+    )
+      return;
     navigate(currentUrl);
   });
 
@@ -216,7 +232,7 @@ export const MoreFilters = () => {
             : {
                 // 250 is half the width of filter component to place filter exactly center of more-filter button
                 left: position.left - 250 + position.width / 2,
-                top: position.top + position.height + 10,
+                top: position.top + position.height + 10 + scrollHeight,
                 width: '31.25em',
                 boxShadow: '2px 1px 23px -1px rgba(143,130,130,0.75)',
               }
@@ -234,15 +250,18 @@ export const MoreFilters = () => {
         <div
           style={{
             left: `${position.left + position.width / 2}px`,
-            top: position.top + position.height + 2,
+            top: position.top + position.height + 2 + scrollHeight,
           }}
           className={`absolute w1 h1 bg-white bl bt b--grey-light rotate-45 z-5`}
         />
       )}
 
       <div
         role="button"
-        className="absolute right-0 z-2 br w-100-l w-0 h-100 bg-blue-dark o-70 h6"
+        className="absolute right-0 z-2 br w-100-l w-0 bg-blue-dark o-70"
+        style={{
+          height: `${projectContainerHeight}px`,
+        }}
       />
     </>
   );