From b27f2ca1465209b27f078a83973774c0ecd1d87f Mon Sep 17 00:00:00 2001
From: Aditya Cherukuru <145639927+aditya-cherukuru@users.noreply.github.com>
Date: Thu, 8 Jan 2026 17:35:32 +0530
Subject: [PATCH] fix(graph): fix toggle click and multiple dropdown issues
 (#16874)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #16843

## Summary

This PR fixes two bugs in graph settings:

1. **Multiple dropdowns opening simultaneously**
2. **Toggle switches not clickable**

---

## Fix 1: Multiple dropdowns

**File:**
[ChartSettingItem.tsx](https://github.com/twentyhq/twenty/blob/main/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/chart-settings/ChartSettingItem.tsx)

Added `closeAnyOpenDropdown()` before opening a new dropdown. This
follows the existing pattern used in:
-
[useCommandMenu.ts](https://github.com/twentyhq/twenty/blob/main/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts)
-
[RecordBoardDragSelect.tsx](https://github.com/twentyhq/twenty/blob/main/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardDragSelect.tsx)
-
[useRecordGroupReorderConfirmationModal.ts](https://github.com/twentyhq/twenty/blob/main/packages/twenty-front/src/modules/object-record/record-group/hooks/useRecordGroupReorderConfirmationModal.ts)

---

## Fix 2: Toggle switches not clickable

**File:**
[MenuItemToggle.tsx](https://github.com/twentyhq/twenty/blob/main/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemToggle.tsx)
(twenty-ui)

### Investigation

I traced the toggle click flow and compared working vs non-working
usages:
- ✅
[SettingsRolesList.tsx](https://github.com/twentyhq/twenty/blob/main/packages/twenty-front/src/modules/settings/roles/components/SettingsRolesList.tsx)
- toggles work (MenuItemToggle directly in Dropdown)
- ✅
[ObjectOptionsDropdownRecordGroupsContent.tsx](https://github.com/twentyhq/twenty/blob/main/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx)
- toggles work (MenuItemToggle in SelectableListItem)
- ❌
[ChartSettingItem.tsx](https://github.com/twentyhq/twenty/blob/main/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/chart-settings/ChartSettingItem.tsx)
- toggles don't work (CommandMenuItemToggle in SelectableListItem)

The component structure and props were identical, so I examined the HTML
output.

### Root Cause

Found **nested `<label>` elements**:

```html
<!-- Before (problematic) -->
<label htmlFor="id123">           <!-- MenuItemToggle's outer label -->
  <div>...content...</div>
  <label>                         <!-- Toggle's internal label -->
    <input id="id123" type="checkbox">
  </label>
</label>
```

While `htmlFor` theoretically links to the checkbox, nested labels are
**invalid HTML** and can cause click propagation issues in certain
browser contexts (particularly when combined with React event handling
and `SelectableList` keyboard navigation).

### Solution
Changed `StyledToggleContainer` from `label` to `div`:

```diff
- const StyledToggleContainer = styled.label`
+ const StyledToggleContainer = styled.div`
```

The
[Toggle](https://github.com/twentyhq/twenty/blob/main/packages/twenty-ui/src/input/components/Toggle.tsx)
component already handles clicks via its internal label wrapper, so the
outer label was redundant.

Also removed unused `useId`, `htmlFor`, and `id` props that were only
needed for the label association.


## Testing

- ✅ TypeScript checks pass on `twenty-ui`
- ✅ TypeScript checks pass on `twenty-front`
- No breaking changes to
[MenuItemToggle](https://github.com/twentyhq/twenty/blob/main/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemToggle.tsx)
API
- All existing usages of
[MenuItemToggle](https://github.com/twentyhq/twenty/blob/main/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemToggle.tsx)
should continue working (and potentially work better)

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../components/chart-settings/ChartSettingItem.tsx         | 3 +++
 .../menu/menu-item/components/MenuItemToggle.tsx           | 7 ++-----
 2 files changed, 5 insertions(+), 5 deletions(-)

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}