Files
twenty/packages
Thomas Trompette a22fdf1d8e fix: prevent duplicate junction rows from double-fired checkbox clicks in multi-select menu items (#22737)
## What

Fixes a bug where selecting a relation from the record picker created
**two** rows in a junction object instead of one (issue #22698).

## Root cause

Base UI's `Checkbox` renders a styled `<span role="checkbox">` plus a
hidden `<input>`. On click of the span it re-dispatches a second,
*bubbling* click on the hidden input (to keep the native input in sync)
without stopping propagation. Both the original span click and the
re-dispatched input click bubble up to the menu-item row, whose
`onClick` drives selection — so one physical click on the checkbox fired
the row's handler **twice**.

This was invisible until now because every consumer's handler was
idempotent:
- multi-select toggle: both calls pass the same `!selected`, net one
toggle
- relation attach: setting a foreign key twice is the same result

The junction relation feature is the first non-idempotent consumer: each
call creates a new junction record with a fresh UUID, so two calls
produced two rows.

## Fix

Extract a shared `MenuItemMultiSelectCheckbox` part that:
- drives selection through the checkbox's own `onCheckedChange` (events
up)
- wraps the checkbox so its click cannot propagate to the row's
`onClick`

The row stays clickable for the rest of the item; the checkbox click and
the row click are now two clean, single-fire event sources. Applied to
all three affected components (`MenuItemMultiSelect`,
`MenuItemMultiSelectAvatar`, `MenuItemMultiSelectTag`) so the whole
class of bug is fixed once, not patched per component. No change to the
shared `Checkbox` API.

## Notes for reviewer

- The `oxlint-disable` for the stopPropagation wrapper's `onClick` now
lives in exactly one place (the shared part), following the existing
precedent in `OverflowingTextWithTooltip`.
- Added a regression interaction test on the `MenuItemMultiSelectAvatar`
story (one checkbox click = one `onSelectChange`); it exercises the
shared part.
- `typecheck`, `oxlint`, and `oxfmt` pass. The Storybook vitest-browser
runner is currently broken locally for all stories, so the interaction
test was not run locally — it runs in CI.


<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/22737?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
2026-07-09 15:54:55 +02:00
..