fix: Close appearance menu when selecting a theme

fix: Position disclosure correctly when menu has submenu fix: More reliably close context menus
outline · Mar 26, 2021 · 889186e · 889186e
1 parent 4166257
commit 889186e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/app/components/ContextMenu/MenuItem.js b/app/components/ContextMenu/MenuItem.js
@@ -13,6 +13,7 @@ type Props = {|
   href?: string,
   target?: "_blank",
   as?: string | React.ComponentType<*>,
+  hide?: () => void,
 |};
 
 const MenuItem = ({
@@ -21,16 +22,34 @@ const MenuItem = ({
   selected,
   disabled,
   as,
+  hide,
   ...rest
 }: Props) => {
+  const handleClick = React.useCallback(
+    (ev) => {
+      if (onClick) {
+        onClick(ev);
+      }
+      if (hide) {
+        hide();
+      }
+    },
+    [hide, onClick]
+  );
+
   return (
     <BaseMenuItem
       onClick={disabled ? undefined : onClick}
       disabled={disabled}
+      hide={hide}
       {...rest}
     >
       {(props) => (
-        <MenuAnchor as={onClick ? "button" : as} {...props}>
+        <MenuAnchor
+          {...props}
+          as={onClick ? "button" : as}
+          onClick={handleClick}
+        >
           {selected !== undefined && (
             <>
               {selected ? <CheckmarkIcon /> : <Spacer />}

diff --git a/app/components/ContextMenu/Template.js b/app/components/ContextMenu/Template.js
@@ -59,7 +59,8 @@ type Props = {|
 
 const Disclosure = styled(ExpandedIcon)`
   transform: rotate(270deg);
-  justify-self: flex-end;
+  position: absolute;
+  right: 8px;
 `;
 
 const Submenu = React.forwardRef(({ templateItems, title, ...rest }, ref) => {

diff --git a/app/menus/AccountMenu.js b/app/menus/AccountMenu.js
@@ -19,6 +19,7 @@ import MenuItem, { MenuAnchor } from "components/ContextMenu/MenuItem";
 import Separator from "components/ContextMenu/Separator";
 import Flex from "components/Flex";
 import Modal from "components/Modal";
+import usePrevious from "hooks/usePrevious";
 import useStores from "hooks/useStores";
 
 type Props = {|
@@ -74,12 +75,19 @@ function AccountMenu(props: Props) {
     placement: "bottom-start",
     modal: true,
   });
-  const { auth } = useStores();
+  const { auth, ui } = useStores();
+  const previousTheme = usePrevious(ui.theme);
   const { t } = useTranslation();
   const [keyboardShortcutsOpen, setKeyboardShortcutsOpen] = React.useState(
     false
   );
 
+  React.useEffect(() => {
+    if (ui.theme !== previousTheme) {
+      menu.hide();
+    }
+  }, [menu, ui.theme, previousTheme]);
+
   return (
     <>
       <Modal