From f88037a1003a4f31ec3111f51569c6fb9856f22b Mon Sep 17 00:00:00 2001
From: Abhinav <abhinavk.grd@gmail.com>
Date: Mon, 27 Jun 2022 06:38:37 +0530
Subject: [PATCH] auto close menu after click

---
 .../CollectionSort/optionCreator.tsx              |  6 +-----
 src/components/OverflowMenu/option.tsx            | 15 +++++++++++++--
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx b/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
index 78fe89aa6..5488857fc 100644
--- a/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
+++ b/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
@@ -1,19 +1,15 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { COLLECTION_SORT_BY } from 'constants/collection';
 import TickIcon from '@mui/icons-material/Done';
 import { CollectionSortProps } from '.';
-import { OverflowMenuContext } from 'contexts/overflowMenu';
 import { OverflowMenuOption } from 'components/OverflowMenu/option';
 import { SvgIcon } from '@mui/material';
 
 const SortByOptionCreator =
     ({ setCollectionSortBy, activeSortBy }: CollectionSortProps) =>
     (props: { sortBy: COLLECTION_SORT_BY; children: any }) => {
-        const { close } = useContext(OverflowMenuContext);
-
         const handleClick = () => {
             setCollectionSortBy(props.sortBy);
-            close();
         };
 
         return (
diff --git a/src/components/OverflowMenu/option.tsx b/src/components/OverflowMenu/option.tsx
index 1e2fb3b91..8131941a9 100644
--- a/src/components/OverflowMenu/option.tsx
+++ b/src/components/OverflowMenu/option.tsx
@@ -1,12 +1,14 @@
 import { MenuItem, ButtonProps, Typography, Box } from '@mui/material';
 import { FluidContainer } from 'components/Container';
-import React from 'react';
+import { OverflowMenuContext } from 'contexts/overflowMenu';
+import React, { useContext } from 'react';
 
 interface Iprops {
     onClick: () => void;
     color?: ButtonProps['color'];
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
+    keepOpenAfterClick?: boolean;
     children?: any;
 }
 export function OverflowMenuOption({
@@ -14,11 +16,20 @@ export function OverflowMenuOption({
     color = 'primary',
     startIcon,
     endIcon,
+    keepOpenAfterClick,
     children,
 }: Iprops) {
+    const menuContext = useContext(OverflowMenuContext);
+
+    const handleClick = () => {
+        onClick();
+        if (!keepOpenAfterClick) {
+            menuContext.close();
+        }
+    };
     return (
         <MenuItem
-            onClick={onClick}
+            onClick={handleClick}
             sx={{
                 color: (theme) => theme.palette[color].main,
                 padding: 1.5,