From 549fc578846fd0bfa16de798db1f8fac561fb260 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <chyla1988@gmail.com>
Date: Wed, 14 Jun 2023 14:30:21 +0200
Subject: [PATCH] Fix close menu panel when click on account settings (#3699)

* Fix close panel settings

* Use controlled component

* Hide menu o theme change

* Fix trigger onOpenChange
---
 src/components/Sidebar/user/Controls.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/Sidebar/user/Controls.tsx b/src/components/Sidebar/user/Controls.tsx
index 702b50bb3..981a8b495 100644
--- a/src/components/Sidebar/user/Controls.tsx
+++ b/src/components/Sidebar/user/Controls.tsx
@@ -11,7 +11,7 @@ import {
   sprinkles,
   Text,
 } from "@saleor/macaw-ui/next";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { Link } from "react-router-dom";
 
@@ -48,15 +48,22 @@ export const useLegacyThemeHandler = () => {
 export const UserControls = () => {
   const { user, logout } = useUser();
   const { changeTheme, theme } = useLegacyThemeHandler();
+  const [open, setOpen] = useState(false);
 
   return (
-    <Dropdown>
+    <Dropdown
+      open={open}
+      onOpenChange={value => {
+        setOpen(value);
+      }}
+    >
       <Dropdown.Trigger>
         <Button
           variant="tertiary"
           icon={<MoreOptionsIcon />}
           data-test-id="userMenu"
           size="medium"
+          onClick={() => setOpen(true)}
         />
       </Dropdown.Trigger>
       <Dropdown.Content align="end">
@@ -71,6 +78,7 @@ export const UserControls = () => {
               <List.Item
                 borderRadius={4}
                 data-test-id="account-settings-button"
+                onClick={() => setOpen(false)}
               >
                 <Link
                   to={staffMemberDetailsUrl(user?.id)}
@@ -110,7 +118,10 @@ export const UserControls = () => {
                 alignItems="center"
                 gap={2}
                 marginTop={1}
-                onClick={changeTheme}
+                onClick={() => {
+                  changeTheme();
+                  setOpen(false);
+                }}
                 {...listItemStyles}
                 data-test-id="theme-switch"
               >