b27f2ca146
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>