fix: UserDropdownMenu isn't opening

lablup · Feb 3, 2025 · ce4e0fd · ce4e0fd
1 parent dc79117
commit ce4e0fd
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 27 deletions.
diff --git a/react/package.json b/react/package.json
@@ -21,7 +21,7 @@
     "ahooks": "^3.8.1",
     "ai": "^4.0.22",
     "ansi_up": "^6.0.2",
-    "antd": "^5.23.2",
+    "antd": "^5.23.3",
     "antd-style": "^3.7.1",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.13",

diff --git a/react/pnpm-lock.yaml b/react/pnpm-lock.yaml
diff --git a/react/src/components/MainLayout/WebUIHeader.tsx b/react/src/components/MainLayout/WebUIHeader.tsx
@@ -140,7 +140,10 @@ const WebUIHeader: React.FC<WebUIHeaderProps> = ({
         </ReverseThemeProvider>
         <UserDropdownMenu
           buttonRender={(btn) => (
-            <ReverseThemeProvider>{btn}</ReverseThemeProvider>
+            //  Add a `div` to resolve the Dropdown bug when the child is a `ConfigProvider`(ReverseThemeProvider).
+            <div>
+              <ReverseThemeProvider>{btn}</ReverseThemeProvider>
+            </div>
           )}
         />
       </Flex>

diff --git a/react/src/components/UserDropdownMenu.tsx b/react/src/components/UserDropdownMenu.tsx
@@ -28,7 +28,7 @@ import {
   theme,
 } from 'antd';
 import _ from 'lodash';
-import React, { Suspense, useState, useTransition } from 'react';
+import React, { Suspense, useTransition } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryLoader } from 'react-relay';
 
@@ -171,7 +171,6 @@ const UserDropdownMenu: React.FC<{
   const [userProfileSettingQueryRef, loadUserProfileSettingQuery] =
     useQueryLoader<UserProfileSettingModalQuery>(UserProfileQuery);
 
-  const [open, setOpen] = useState(false);
   return (
     <>
       <Dropdown
@@ -181,17 +180,11 @@ const UserDropdownMenu: React.FC<{
           maxWidth: 300,
         }}
         placement="bottomRight"
-        open={open}
-        onOpenChange={(open) => {
-          setOpen(open);
-        }}
       >
         {buttonRender(
           <Button
             type="text"
             data-testid="user-dropdown-button"
-            // loading={isPendingInitializeSettingModal}
-            onClick={(e) => setOpen(!open)}
             style={{
               textOverflow: 'ellipsis',
               whiteSpace: 'nowrap',

diff --git a/react/src/components/__snapshots__/DomainSelector.test.tsx.snap b/react/src/components/__snapshots__/DomainSelector.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`DomainSelect default render 1`] = `
 <DocumentFragment>
   <div
-    class="ant-select ant-select-outlined css-dev-only-do-not-override-1htoz2s ant-select-focused ant-select-single ant-select-show-arrow ant-select-open"
+    class="ant-select ant-select-outlined css-dev-only-do-not-override-cdzvx5 ant-select-focused ant-select-single ant-select-show-arrow ant-select-open"
     title="hello"
   >
     <div