From 6593bd4d9c33c1c2f1348f5da71da0644b60cbdb Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Wed, 29 Sep 2021 14:06:47 +0200
Subject: [PATCH] fix: close the More options menu when an option has been
 selected [v37] (#1983) (#2004)

Fixes: https://jira.dhis2.org/browse/DHIS2-11773

The More options button and menu is complicated because there are 2 copies (of both the button and the menu) - one for small screen and one for not-small screen. So in order to toggle that menu, the small/not-small flag was being provided to the toggle function, but that flag was only available if clicking on the More button. When selecting an option in the menu, the menu should always be closed, so the solution was to trigger close on both menus.
---
 src/components/DropdownButton/DropdownButton.js |  2 +-
 src/pages/view/TitleBar/ActionsBar.js           | 15 +++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/DropdownButton/DropdownButton.js b/src/components/DropdownButton/DropdownButton.js
index 7cb4304db..e7847a4ae 100644
--- a/src/components/DropdownButton/DropdownButton.js
+++ b/src/components/DropdownButton/DropdownButton.js
@@ -19,7 +19,7 @@ const DropdownButton = ({
     return (
         <div ref={anchorRef}>
             <OfflineTooltip disabledWhenOffline={disabledWhenOffline}>
-                <Button onClick={onClick} {...rest}>
+                <Button onClick={onClick} type="button" {...rest}>
                     {children}
                     <ArrowIconComponent className={styles.arrow} />
                 </Button>
diff --git a/src/pages/view/TitleBar/ActionsBar.js b/src/pages/view/TitleBar/ActionsBar.js
index bb2bf0db1..0fdb3c129 100644
--- a/src/pages/view/TitleBar/ActionsBar.js
+++ b/src/pages/view/TitleBar/ActionsBar.js
@@ -64,6 +64,11 @@ const ViewActions = ({
             ? setMoreOptionsSmallIsOpen(!moreOptionsSmallIsOpen)
             : setMoreOptionsIsOpen(!moreOptionsIsOpen)
 
+    const closeMoreOptions = () => {
+        setMoreOptionsSmallIsOpen(false)
+        setMoreOptionsIsOpen(false)
+    }
+
     if (redirectUrl) {
         return <Redirect to={redirectUrl} />
     }
@@ -86,12 +91,12 @@ const ViewActions = ({
     }
 
     const onRemoveFromOffline = () => {
-        toggleMoreOptions()
+        closeMoreOptions()
         lastUpdated && remove()
     }
 
     const onAddToOffline = () => {
-        toggleMoreOptions()
+        closeMoreOptions()
         return filtersLength
             ? setConfirmCacheDialogIsOpen(true)
             : startRecording({
@@ -101,7 +106,7 @@ const ViewActions = ({
 
     const onToggleShowDescription = () => {
         updateShowDescription(!showDescription)
-        toggleMoreOptions()
+        closeMoreOptions()
         !offline && apiPostShowDescription(!showDescription)
     }
 
@@ -109,9 +114,7 @@ const ViewActions = ({
         apiStarDashboard(dataEngine, id, !starred)
             .then(() => {
                 setDashboardStarred(id, !starred)
-                if (moreOptionsIsOpen) {
-                    toggleMoreOptions()
-                }
+                closeMoreOptions()
             })
             .catch(() => {
                 const msg = starred