fix: sort menu collapse after filter selection

openedx · Jan 16, 2024 · cf844a1 · cf844a1
1 parent 5df51f2
commit cf844a1
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 8 deletions.
diff --git a/src/components/FilterBar.jsx b/src/components/FilterBar.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/forbid-prop-types */
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { capitalize, toString } from 'lodash';
@@ -93,10 +93,17 @@ const FilterBar = ({
     },
   ];
 
+  const handleFilterToggle = useCallback((event) => {
+    setOpen((prevIsOpen) => !prevIsOpen);
+    if (event) {
+      onFilterChange(event);
+    }
+  }, [onFilterChange]);
+
   return (
     <Collapsible.Advanced
       open={isOpen}
-      onToggle={() => setOpen(!isOpen)}
+      onToggle={() => handleFilterToggle()}
       className="filter-bar collapsible-card-lg border-0"
     >
       <Collapsible.Trigger className="collapsible-trigger border-0">
@@ -126,7 +133,7 @@ const FilterBar = ({
                 name={value.name}
                 className="d-flex flex-column list-group list-group-flush"
                 value={selectedFilters[value.name]}
-                onChange={onFilterChange}
+                onChange={handleFilterToggle}
               >
                 {value.filters.map(filterName => {
                   const element = allFilters.find(obj => obj.id === filterName);
@@ -159,7 +166,7 @@ const FilterBar = ({
                     name="cohort"
                     className="d-flex flex-column list-group list-group-flush w-100"
                     value={selectedFilters.cohort}
-                    onChange={onFilterChange}
+                    onChange={handleFilterToggle}
                   >
                     <ActionItem
                       id="all-groups"

diff --git a/src/discussions/learners/learner/LearnerFilterBar.jsx b/src/discussions/learners/learner/LearnerFilterBar.jsx
@@ -67,11 +67,12 @@ const LearnerFilterBar = () => {
         },
       );
     }
+    setOpen((prevIsOpen) => !prevIsOpen);
   }, []);
 
   const handleOnToggle = useCallback(() => {
-    setOpen(!isOpen);
-  }, [isOpen]);
+    setOpen((prevIsOpen) => !prevIsOpen);
+  }, []);
 
   return (
     <Collapsible.Advanced

diff --git a/src/discussions/posts/post-filter-bar/PostFilterBar.jsx b/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
@@ -130,11 +130,12 @@ const PostFilterBar = () => {
     }
 
     sendTrackEvent('edx.forum.filter.content', filterContentEventProperties);
+    setOpen((prevIsOpen) => !prevIsOpen);
   }, [currentFilters, currentSorting, dispatch, selectedCohort]);
 
   const handleToggle = useCallback(() => {
-    setOpen(!isOpen);
-  }, [isOpen]);
+    setOpen((prevIsOpen) => !prevIsOpen);
+  }, []);
 
   useEffect(() => {
     if (userHasModerationPrivileges && isEmpty(cohorts)) {