Thomas Trompette
b682162f31
## Problem Fixes #22383. Overflowing relation & multi-select chip cells didn't show the "+N" overflow button, so hidden records/values were unreachable. There were several distinct causes behind this, addressed below. Before <img width="263" height="34" alt="Capture d’écran 2026-07-10 à 11 43 13" src="https://github.com/user-attachments/assets/1001d47b-0f54-4fbd-a5cb-83a5c32c35ac" /> After <img width="263" height="34" alt="Capture d’écran 2026-07-10 à 11 41 54" src="https://github.com/user-attachments/assets/d4f5cf2f-fda4-422e-b72d-2df3fc81a06f" /> ## Changes **1. Overflow detection missed right-edge-clipped chips** `isFirstOverflowingChildElement` used `childElement.offsetLeft > containerElement.clientWidth` (left edge past the container), which is false when a chip is only right-edge clipped. Switched to a right-edge check: `childElement.offsetLeft + childElement.offsetWidth > containerElement.clientWidth`. **2. Multi-select never used the overflow list when unfocused** `MultiSelectFieldDisplay` rendered a plain clipped `MultiSelectDisplay` when not focused, and only used `ExpandableList` on focus. That non-focused fallback painted over the focused "+N" and hid it. It now always renders through `ExpandableList` with `isChipCountDisplayed={isFocused}`, matching `RelationFromManyFieldDisplay`, so the count shows on focus only (not idle). **3. The hover portal was never actually focused** `FieldFocusContextProvider` silently ignored its `isFocused` prop (`({ children }: any)` + hard-coded `useState(false)`), so `RecordInlineCellAnchoredPortal`'s `<FieldFocusContextProvider isFocused={true}>` had no effect and the hovered cell's display always saw `isFocused=false`. That's why "+N" never appeared on hover for any multi-value field. The portal now uses the existing `FieldFocusStaticFocusedProvider`, fulfilling the intent — so relations, multi-select, emails and phones all surface their "+N" on hover. **4. "+N" was hard to read on multi-select** The "+N" chip has a transparent background (shared component), and the hover portal let the base layer's colored option chips bleed through it. Gave the hover portal content an opaque `background.primary` so nothing bleeds through; the "+N" component itself is untouched, so relations/emails/phones keep their existing look. ## Test plan - Hover a relation or multi-select field whose values overflow the cell: the "+N" button appears (and is readable), and clicking it lists the hidden records. When not hovered, no "+N" shows. - Verify fully-overflowing rows still show the correct "+N" count.
The #1 Open-Source CRM
Website · 
Documentation · 
Roadmap · 
Discord · 
Figma
Why Twenty
Twenty gives technical teams the building blocks for a custom CRM that meets complex business needs and quickly adapts as the business evolves. Twenty is the CRM you build, ship, and version like the rest of your stack.
Learn more about why we built Twenty
Installation
Cloud
The fastest way to get started. Sign up at twenty.com and spin up a workspace in under a minute, with no infrastructure to manage and always up to date.
Build an app
Scaffold a new app with the Twenty CLI:
npx create-twenty-app my-app
Define objects, fields, and views as code:
import { defineObject, FieldType } from 'twenty-sdk/define';
export default defineObject({
nameSingular: 'deal',
namePlural: 'deals',
labelSingular: 'Deal',
labelPlural: 'Deals',
fields: [
{ name: 'name', label: 'Name', type: FieldType.TEXT },
{ name: 'amount', label: 'Amount', type: FieldType.CURRENCY },
{ name: 'closeDate', label: 'Close Date', type: FieldType.DATE_TIME },
],
});
Then ship it to your workspace:
npx twenty app:publish --private
See the app development guide for objects, views, agents, and logic functions.
Self-hosting
Run Twenty on your own infrastructure with Docker Compose, or contribute locally via the local setup guide.
Everything you need
Twenty gives you the building blocks of a modern CRM (objects, views, workflows, and agents) and lets you extend them as code. Here's a tour of what's in the box.
Want to go deeper? Read the 
User Guide for product walkthroughs, or the Documentation for developer reference.
|
|
|
|
|
|
Learn more about version control in docStack
TypeScript
Nx
NestJS, with BullMQ, 
PostgreSQL, 
Redis
React, with Jotai, Linaria and Lingui
Thanks
Thanks to these amazing services that we use and recommend for code review (Greptile), catching bugs (Sentry) and translating (Crowdin).
Join the Community
Star the repo · Discord · 
Feature requests · Releases · 
X · 
LinkedIn · 
Crowdin · 
Contribute