Thomas Trompette
a22fdf1d8e
## 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. -->
twenty-ui
Twenty's open-source React UI component library: components, icons, and design tokens built on a zero-runtime, CSS-variable styling layer.
Installation
npm install twenty-ui
react, react-dom, and monaco-editor are peer dependencies (install them in your app). monaco-editor is only required if you use the code editor components.
Usage
Import the base styles once, pick a theme stylesheet, and wrap your app in ThemeProvider:
import { ThemeProvider } from 'twenty-ui/theme-constants';
import { Button } from 'twenty-ui/input';
import 'twenty-ui/style.css';
import 'twenty-ui/theme-light.css';
export const App = () => (
<ThemeProvider colorScheme="light">
<Button title="Click me" />
</ThemeProvider>
);
Components are available from the root entry point or from a specific subpath for better tree-shaking:
import { Button } from 'twenty-ui';
import { Button } from 'twenty-ui/input';
Entry points
| Subpath | Contents |
|---|---|
twenty-ui |
All components, icons, theme tokens, and utilities |
twenty-ui/accessibility |
Accessibility helpers |
twenty-ui/assets |
Logos and static assets |
twenty-ui/data-display |
Avatars, chips, tags, and other display components |
twenty-ui/feedback |
Progress bars, loaders, and status feedback |
twenty-ui/icon |
Icon components and the icon provider |
twenty-ui/input |
Buttons, toggles, and form inputs |
twenty-ui/json-visualizer |
JSON tree viewer |
twenty-ui/layout |
Layout primitives |
twenty-ui/navigation |
Menus, links, and navigation components |
twenty-ui/surfaces |
Cards, tooltips, and surface components |
twenty-ui/testing |
Storybook and test decorators |
twenty-ui/theme |
Theme types and helpers |
twenty-ui/theme-constants |
Design tokens, ThemeProvider, and useTheme |
twenty-ui/typography |
Text and typography components |
twenty-ui/utilities |
Hooks and shared utilities |
Theming
twenty-ui/style.cssships the base reset and component styles. Import it once.twenty-ui/theme-light.cssandtwenty-ui/theme-dark.cssdefine the design-token CSS variables for each color scheme.ThemeProviderexposes the active theme throughuseTheme()and applies thelight/darkclass. PassapplyToRoot={false}withoverridesto scope a theme to a subtree instead of the document root.
Development
npx nx build twenty-ui # Build the library (dual ESM/CJS + types)
npx nx storybook:serve:dev twenty-ui # Run Storybook
npx nx test twenty-ui # Run unit tests
License
twenty-ui is released under the AGPL-3.0 license.