Close dropdown after selection or click outside the list

Signed-off-by: Radoslaw Szwajkowski <[email protected]>
konveyor · Sep 4, 2024 · 3efb63c · 3efb63c
1 parent 236cf63
commit 3efb63c
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}