diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/chart-settings/ChartSettingItem.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/chart-settings/ChartSettingItem.tsx
index f3f0ba5be3..d519ac951f 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/chart-settings/ChartSettingItem.tsx
+++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/chart-settings/ChartSettingItem.tsx
@@ -16,6 +16,7 @@ import { type ChartSettingsItem } from '@/command-menu/pages/page-layout/types/C
 import { isMinMaxRangeValid } from '@/command-menu/pages/page-layout/utils/isMinMaxRangeValid';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
+import { useCloseAnyOpenDropdown } from '@/ui/layout/dropdown/hooks/useCloseAnyOpenDropdown';
 import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
@@ -35,6 +36,7 @@ export const ChartSettingItem = ({
   configuration,
 }: ChartSettingItemProps) => {
   const { pageLayoutId } = usePageLayoutIdFromContextStoreTargetedRecord();
+  const { closeAnyOpenDropdown } = useCloseAnyOpenDropdown();
   const { openDropdown } = useOpenDropdown();
   const { setSelectedItemId } = useSelectableList(
     COMMAND_MENU_LIST_SELECTABLE_LIST_ID,
@@ -71,6 +73,7 @@ export const ChartSettingItem = ({
   };
 
   const handleDropdownOpen = () => {
+    closeAnyOpenDropdown();
     openDropdown({
       dropdownComponentInstanceIdFromProps: item.id,
     });
diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemToggle.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemToggle.tsx
index 8d1cc9a769..86ec9d82f4 100644
--- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemToggle.tsx
+++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemToggle.tsx
@@ -1,14 +1,13 @@
 import styled from '@emotion/styled';
 import { type IconComponent } from '@ui/display';
 import { Toggle, type ToggleSize } from '@ui/input';
-import { useId } from 'react';
 import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
 import {
   StyledMenuItemBase,
   StyledMenuItemRightContent,
 } from '../internals/components/StyledMenuItemBase';
 
-const StyledToggleContainer = styled.label`
+const StyledToggleContainer = styled.div`
   align-items: center;
   cursor: pointer;
   display: flex;
@@ -39,14 +38,13 @@ export const MenuItemToggle = ({
   toggleSize,
   disabled = false,
 }: MenuItemToggleProps) => {
-  const instanceId = useId();
   return (
     <StyledMenuItemBase
       className={className}
       focused={focused}
       disabled={disabled}
     >
-      <StyledToggleContainer htmlFor={instanceId}>
+      <StyledToggleContainer>
         <MenuItemLeftContent
           LeftIcon={LeftIcon}
           text={text}
@@ -55,7 +53,6 @@ export const MenuItemToggle = ({
         />
         <StyledMenuItemRightContent>
           <Toggle
-            id={instanceId}
             value={toggled}
             onChange={disabled ? undefined : onToggleChange}
             toggleSize={toggleSize}