From 16f166f80fccf91e8be668c53e238e10e675f45f Mon Sep 17 00:00:00 2001
From: Radoslaw Szwajkowski <rszwajko@redhat.com>
Date: Wed, 4 Sep 2024 20:28:34 +0200
Subject: [PATCH] :bug:  Close dropdown after selection or click outside the
 list (#2077)

Fix applies to bulk selection dropdown and to filter categories dropdown
on all table-based screens.

Resolves:  https://issues.redhat.com/browse/MTA-3321

Signed-off-by: Radoslaw Szwajkowski <rszwajko@redhat.com>
---
 client/src/app/components/FilterToolbar/FilterToolbar.tsx | 1 +
 client/src/app/components/ToolbarBulkSelector.tsx         | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/client/src/app/components/FilterToolbar/FilterToolbar.tsx b/client/src/app/components/FilterToolbar/FilterToolbar.tsx
index c04803fa64..6c240ca962 100644
--- a/client/src/app/components/FilterToolbar/FilterToolbar.tsx
+++ b/client/src/app/components/FilterToolbar/FilterToolbar.tsx
@@ -203,6 +203,7 @@ export const FilterToolbar = <TItem, TFilterCategoryKey extends string>({
         {!showFiltersSideBySide && (
           <ToolbarItem>
             <Dropdown
+              onOpenChange={(flag) => setIsCategoryDropdownOpen(flag)}
               toggle={(toggleRef) => (
                 <MenuToggle
                   id="filtered-by"
diff --git a/client/src/app/components/ToolbarBulkSelector.tsx b/client/src/app/components/ToolbarBulkSelector.tsx
index ed3712f726..da6648857a 100644
--- a/client/src/app/components/ToolbarBulkSelector.tsx
+++ b/client/src/app/components/ToolbarBulkSelector.tsx
@@ -78,6 +78,7 @@ export const ToolbarBulkSelector = <T,>({
     <DropdownItem
       onClick={() => {
         handleSelectAll(false);
+        setIsOpen(false);
       }}
       data-action="none"
       key="select-none"
@@ -91,6 +92,7 @@ export const ToolbarBulkSelector = <T,>({
           currentPageItems.map((item: T) => item),
           true
         );
+        setIsOpen(false);
       }}
       data-action="page"
       key="select-page"
@@ -101,6 +103,7 @@ export const ToolbarBulkSelector = <T,>({
     <DropdownItem
       onClick={() => {
         handleSelectAll(true);
+        setIsOpen(false);
       }}
       data-action="all"
       key="select-all"
@@ -116,6 +119,7 @@ export const ToolbarBulkSelector = <T,>({
       <ToolbarItem>
         <Dropdown
           isOpen={isOpen}
+          onOpenChange={(flag) => setIsOpen(flag)}
           toggle={(toggleRef) => (
             <MenuToggle
               ref={toggleRef}