From ffb386472dd1a958f62ead9d3b10ceb1e5300750 Mon Sep 17 00:00:00 2001
From: sundasnoreen12 <72802712+sundasnoreen12@users.noreply.github.com>
Date: Wed, 17 Jan 2024 16:28:54 +0500
Subject: [PATCH] fix: sort menu collapse after filter selection (#645)

* fix: sort menu collapse after filter selection

* refactor: filter menu collapse logic

---------

Co-authored-by: Awais Ansari <awais.ansari63@gmail.com>
---
 src/components/FilterBar.jsx                        | 13 +++++++++----
 .../learners/learner/LearnerFilterBar.jsx           |  7 ++-----
 .../posts/post-filter-bar/PostFilterBar.jsx         |  7 ++-----
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/FilterBar.jsx b/src/components/FilterBar.jsx
index e1cbaa2f3..84cde4c60 100644
--- 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,15 @@ const FilterBar = ({
     },
   ];
 
+  const handleFilterToggle = useCallback((event) => {
+    onFilterChange(event);
+    setOpen(false);
+  }, [onFilterChange]);
+
   return (
     <Collapsible.Advanced
       open={isOpen}
-      onToggle={() => setOpen(!isOpen)}
+      onToggle={setOpen}
       className="filter-bar collapsible-card-lg border-0"
     >
       <Collapsible.Trigger className="collapsible-trigger border-0">
@@ -126,7 +131,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 +164,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
index 3afe6ccb8..a1b371ede 100644
--- a/src/discussions/learners/learner/LearnerFilterBar.jsx
+++ b/src/discussions/learners/learner/LearnerFilterBar.jsx
@@ -67,16 +67,13 @@ const LearnerFilterBar = () => {
         },
       );
     }
+    setOpen(false);
   }, []);
 
-  const handleOnToggle = useCallback(() => {
-    setOpen(!isOpen);
-  }, [isOpen]);
-
   return (
     <Collapsible.Advanced
       open={isOpen}
-      onToggle={handleOnToggle}
+      onToggle={setOpen}
       className="filter-bar collapsible-card-lg border-0"
     >
       <Collapsible.Trigger className="collapsible-trigger border-0">
diff --git a/src/discussions/posts/post-filter-bar/PostFilterBar.jsx b/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
index 040ae4ef0..4cc172d78 100644
--- a/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
+++ b/src/discussions/posts/post-filter-bar/PostFilterBar.jsx
@@ -130,12 +130,9 @@ const PostFilterBar = () => {
     }
 
     sendTrackEvent('edx.forum.filter.content', filterContentEventProperties);
+    setOpen(false);
   }, [currentFilters, currentSorting, dispatch, selectedCohort]);
 
-  const handleToggle = useCallback(() => {
-    setOpen(!isOpen);
-  }, [isOpen]);
-
   useEffect(() => {
     if (userHasModerationPrivileges && isEmpty(cohorts)) {
       dispatch(fetchCourseCohorts(courseId));
@@ -183,7 +180,7 @@ const PostFilterBar = () => {
   return (
     <Collapsible.Advanced
       open={isOpen}
-      onToggle={handleToggle}
+      onToggle={setOpen}
       className="filter-bar collapsible-card-lg border-0"
     >
       <Collapsible.Trigger className="collapsible-trigger border-0">