🐛 Close dropdown after selection or click outside the list (#2077) (#…

…2078) Fix applies to bulk selection dropdown and to filter categories dropdown on all table-based screens. Resolves: https://issues.redhat.com/browse/MTA-3321 Backport-of: #2077 Signed-off-by: Radoslaw Szwajkowski <[email protected]> Signed-off-by: Cherry Picker <[email protected]>
konveyor · Sep 4, 2024 · 3236f07 · 3236f07
1 parent e1c60f1
commit 3236f07
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git 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
@@ -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}