fix: close the More options menu when an option has been selected [v3…

…7] (#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

@@ -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>

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,17 +106,15 @@ const ViewActions = ({
 
     const onToggleShowDescription = () => {
         updateShowDescription(!showDescription)
-        toggleMoreOptions()
+        closeMoreOptions()
         !offline && apiPostShowDescription(!showDescription)
     }
 
     const onToggleStarredDashboard = () =>
         apiStarDashboard(dataEngine, id, !starred)
             .then(() => {
                 setDashboardStarred(id, !starred)
-                if (moreOptionsIsOpen) {
-                    toggleMoreOptions()
-                }
+                closeMoreOptions()
             })
             .catch(() => {
                 const msg = starred