fix(graph): fix toggle click and multiple dropdown issues

[aditya-cherukuru]

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

Added closeAnyOpenDropdown() before opening a new dropdown. This follows the existing pattern used in:

• useCommandMenu.ts
• RecordBoardDragSelect.tsx
• useRecordGroupReorderConfirmationModal.ts

---

Fix 2: Toggle switches not clickable

File: MenuItemToggle.tsx (twenty-ui)

Investigation

I traced the toggle click flow and compared working vs non-working usages:

• ✅ SettingsRolesList.tsx - toggles work (MenuItemToggle directly in Dropdown)
• ✅ ObjectOptionsDropdownRecordGroupsContent.tsx - toggles work (MenuItemToggle in SelectableListItem)
• ❌ 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:

<!-- 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:

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

The Toggle 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 API
• All existing usages of MenuItemToggle should continue working (and potentially work better)

[greptile-apps]

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

[cubic-dev-ai]

No issues found across 2 files

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:21040

This environment will automatically shut down when the PR is closed or after 5 hours.

[charlesBochet]

Thank you!

[twenty-eng-sync]

Hey @charlesBochet! After you've done the QA of your Pull Request, you can mark it as done here. Thank you!

[twenty-eng-sync]

Hey @charlesBochet! After you've done the QA of your Pull Request, you can mark it as done here. Thank you!