feat(core/ix-select): overflow chip#2619
Conversation
🦋 Changeset detectedLatest commit: d2bf63a The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for ix-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthrough
Changesix-select multiple-mode chip overflow
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces chip overflow handling for the ix-select component in multiple selection mode. When selected chips exceed the available container width, they are hidden and replaced with an overflow indicator chip (+N) that opens a dropdown containing the hidden items. To support this, a hideCloseButton property was added to ix-filter-chip. Feedback on these changes highlights a critical bug where chips rendered inside initially hidden containers fail to measure properly when they become visible, which can be resolved by triggering a re-render. Additionally, the feedback identifies style guide violations regarding a missing @since tag on the new property, a missing axe-based accessibility test for the new interactive overflow chip, and a consistency improvement to rename ariaLabelMoreItems to i18nMoreItems.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| private calculateChipOverflow() { | ||
| if (!this.isMultipleMode || this.shouldDisplayAllChip()) { | ||
| return; | ||
| } | ||
|
|
||
| const container = this.chipsContainerRef.current; | ||
| if (!container) { | ||
| return; | ||
| } | ||
|
|
||
| const values = this.selectedItems.map((item) => item.value.toString()); | ||
| if (values.length === 0) { | ||
| this.applyOverflowState(null, []); | ||
| return; | ||
| } | ||
|
|
||
| if (!values.every((value) => this.chipWidths.has(value))) { | ||
| return; | ||
| } |
There was a problem hiding this comment.
If the ix-select component is initially rendered inside a hidden container (e.g., display: none in a tab or modal), the chips will have an offsetWidth of 0 during the initial render. Consequently, this.chipWidths will not be populated, and calculateChipOverflow() will return early. When the container later becomes visible, the ResizeObserver will fire and call calculateChipOverflow(), but it will still return early because this.chipWidths is empty, and no re-render/re-measurement will ever be triggered.
To fix this, when calculateChipOverflow() is called and there are unmeasured chips, we should trigger a re-render using forceUpdate(this) so that componentDidRender can measure the chips now that the container is visible.
private calculateChipOverflow() {
if (!this.isMultipleMode || this.shouldDisplayAllChip()) {
return;
}
const container = this.chipsContainerRef.current;
if (!container) {
return;
}
const values = this.selectedItems.map((item) => item.value.toString());
if (values.length === 0) {
this.applyOverflowState(null, []);
return;
}
if (!values.every((value) => this.chipWidths.has(value))) {
// Trigger a re-render to let componentDidRender measure the chips now that the container is visible
forceUpdate(this);
return;
}
lzeiml
changed the title
…com/siemens/ix into feature/3720_select-overflow-stable
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.changeset/lucky-schools-enter.md:
- Around line 5-7: This changeset only documents the ix-select overflow behavior
and ariaLabelMoreItems, but the public API addition hideCloseButton on
ix-filter-chip is missing. Update the changeset to mention hideCloseButton
alongside the existing API notes, using the ix-filter-chip component name, or
explicitly state that it is internal-only if that is the intent. Keep the entry
aligned with the public API changes so the release note covers all externally
visible updates.
In `@packages/core/src/components.d.ts`:
- Around line 1944-1948: The public prop hideCloseButton is missing the required
JSDoc `@since` tag for a new API. Update the documentation comment on
hideCloseButton in components.d.ts (and the corresponding generated declaration
entry if applicable) to include the correct `@since` version used for this
component’s public API, keeping the existing description intact.
In `@packages/core/src/components/filter-chip/filter-chip.tsx`:
- Around line 39-45: The new public prop hideCloseButton in FilterChip needs a
JSDoc `@since` tag. Update the documentation comment on the hideCloseButton `@Prop`
in filter-chip.tsx to include the correct version marker for when this API was
introduced, keeping the rest of the prop description unchanged.
In `@packages/core/src/components/select/select.tsx`:
- Around line 1115-1118: Clear the stale overflow state in select.tsx when
overflow is no longer applicable. In `calculateChipOverflow()`, if
`isMultipleMode` is false or `shouldDisplayAllChip()` becomes true, reset
`hiddenChipValues` so the overflow dropdown cannot keep rendering from prior
state. Make sure the render path around the overflow trigger and chip display
logic (including the `collapseMultipleSelection`/“All” chip branch) reflects the
cleared state consistently.
- Around line 842-845: The overflow trigger in select.tsx is using listbox
semantics that do not match the actual overflow content. Update the
accessibility attributes on the trigger in the select component so they reflect
the real popup type: either change the aria-haspopup value in the overflow
trigger logic to menu or dialog, or adjust the overflow content markup to use
proper listbox/option semantics. Use the select component’s overflow trigger and
dropdown rendering code to keep the ARIA contract consistent.
- Around line 1088-1113: Update getOverflowChipValues in select.tsx so it does
not always force the first selected chip into visible; instead, calculate
whether the first chip plus the overflow chip fit within available, and allow
visible to be empty when only the overflow chip fits. Use the existing
getChipWidthWithMargin and getOverflowChipWidthWithMargin helpers in this method
to decide whether to place firstValue in visible or move it into hidden,
preserving access to overflow selections in narrow containers.
- Around line 828-932: Add axe coverage for the overflow chip/dropdown
accessibility state in the Select component tests. Update the `select.ct.ts`
test suite to render a scenario that exercises `renderOverflowChip()` and
`renderOverflowDropdown()` (the `+N` chip with keyboard/focus behavior) and run
`makeAxeBuilder()` against that overflow state. Keep the new assertion near the
existing axe test so the accessibility coverage includes the overflow path.
In `@packages/core/src/components/select/test/select.ct.ts`:
- Line 1350: The new component tests in select.ct.ts are using plain test(...)
instead of the required regressionTest(...) convention. Update the affected
cases, including the ones identified by the test names around the hidden-item,
preserve-existing-hover, and item-removed scenarios, to use regressionTest from
`@utils/test` so they match the component test pattern used elsewhere in this
suite.
- Around line 1350-1464: The new overflow-dropdown interaction tests in
select.ct.ts cover focus and keyboard behavior, but they still miss
accessibility verification for the opened overflow state. Add an axe-based
assertion in the relevant multiple-mode overflow dropdown test(s), using the
existing test structure around ix-select, ix-filter-chip.chip-overflow, and
ix-dropdown.overflow-dropdown, so the newly introduced open state is included in
accessibility coverage.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: d8bd5142-fa06-4cf7-b48a-b6042a985ffe
⛔ Files ignored due to path filters (8)
packages/angular/standalone/src/components.tsis excluded by!packages/angular/standalone/src/components.tspackages/react/src/components/components.server.tsis excluded by!packages/react/src/components/**packages/vue/src/components/ix-filter-chip.tsis excluded by!packages/vue/src/components/**packages/vue/src/components/ix-select.tsis excluded by!packages/vue/src/components/**testing/visual-testing/__screenshots__/tests/select/select.e2e.ts/select-mode-multiple-overflow-1-chromium---classic-dark-linux.pngis excluded by!**/*.pngtesting/visual-testing/__screenshots__/tests/select/select.e2e.ts/select-mode-multiple-overflow-1-chromium---classic-light-linux.pngis excluded by!**/*.pngtesting/visual-testing/__screenshots__/tests/select/select.e2e.ts/select-mode-multiple-overflow-scroll-down-1-chromium---classic-dark-linux.pngis excluded by!**/*.pngtesting/visual-testing/__screenshots__/tests/select/select.e2e.ts/select-mode-multiple-overflow-scroll-down-1-chromium---classic-light-linux.pngis excluded by!**/*.png
📒 Files selected for processing (10)
.changeset/lucky-schools-enter.mdpackages/angular/src/components.tspackages/core/src/components.d.tspackages/core/src/components/filter-chip/filter-chip.scsspackages/core/src/components/filter-chip/filter-chip.tsxpackages/core/src/components/select/select.scsspackages/core/src/components/select/select.tsxpackages/core/src/components/select/test/select.ct.tstesting/visual-testing/tests/select/mode-multiple-overflow/index.htmltesting/visual-testing/tests/select/select.e2e.ts
💤 Files with no reviewable changes (1)
- testing/visual-testing/tests/select/select.e2e.ts
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/core/src/components/select/select.tsx (1)
1199-1209: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winRe-measure the overflow chip when the hidden count changes.
overflowChipWidthis cached after the first measurement, but the rendered text changes from e.g.+9to+10; using the stale width can compute too many visible chips and clip the overflow trigger.🐛 Proposed fix
private async measureOverflowChipWidth() { - if (this.hiddenChipValues.length === 0 || this.overflowChipWidth > 0) { + if (this.hiddenChipValues.length === 0) { return; } const overflowElement = await this.overflowChipRef.waitForCurrent(); await this.waitForChipLayout([overflowElement]); - if (overflowElement.offsetWidth > 0) { + if ( + overflowElement.offsetWidth > 0 && + overflowElement.offsetWidth !== this.overflowChipWidth + ) { this.overflowChipWidth = overflowElement.offsetWidth; } }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/components/select/select.tsx` around lines 1199 - 1209, The cached overflow chip width in measureOverflowChipWidth is only measured once, so it becomes stale when hiddenChipValues changes and the displayed count text changes (for example from +9 to +10). Update the logic in Select’s measureOverflowChipWidth to detect when the hidden count differs from the last measured count and re-measure the overflow chip width in that case, keeping the cache only when the rendered label is unchanged.
♻️ Duplicate comments (1)
packages/core/src/components/select/test/select.ct.ts (1)
1466-1466: 📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick winUse
regressionTestinstead of plaintestin this component test.This new
.ct.tscase usestest(...); switch it toregressionTest(...)to match the required suite convention.Suggested change
-test('multiple mode: focused "+N" chip traps Tab navigation', async ({ +regressionTest('multiple mode: focused "+N" chip traps Tab navigation', async ({As per path instructions, "
packages/core/src/components/**/test/*.ct.ts: Prefer regressionTest from@utils/test(not plain Playwright test)."🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/components/select/test/select.ct.ts` at line 1466, This component test currently uses plain test instead of the required regressionTest convention. Update the new case in select.ct.ts, specifically the test named multiple mode: focused "+N" chip traps Tab navigation, to use regressionTest from `@utils/test` so it matches the rest of the component test suite.Source: Path instructions
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@packages/core/src/components/select/select.tsx`:
- Around line 1199-1209: The cached overflow chip width in
measureOverflowChipWidth is only measured once, so it becomes stale when
hiddenChipValues changes and the displayed count text changes (for example from
+9 to +10). Update the logic in Select’s measureOverflowChipWidth to detect when
the hidden count differs from the last measured count and re-measure the
overflow chip width in that case, keeping the cache only when the rendered label
is unchanged.
---
Duplicate comments:
In `@packages/core/src/components/select/test/select.ct.ts`:
- Line 1466: This component test currently uses plain test instead of the
required regressionTest convention. Update the new case in select.ct.ts,
specifically the test named multiple mode: focused "+N" chip traps Tab
navigation, to use regressionTest from `@utils/test` so it matches the rest of the
component test suite.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: c25f6693-0dd0-4fcb-a74e-afa74eba84b0
📒 Files selected for processing (2)
packages/core/src/components/select/select.tsxpackages/core/src/components/select/test/select.ct.ts
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/core/src/components/select/select.tsx (1)
1064-1071: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winInvalidate the overflow-chip width when the
+Ncount changes.
measureOverflowChipWidth()returns forever after the first measurement, but the chip text changes from+9to+10, etc. The overflow calculation can then use a stale, too-small width and leave chips clipped.Proposed fix
private applyOverflowState(visible: string[] | null, hidden: string[]) { if (!this.sameChipValues(this.visibleChipValues, visible)) { this.visibleChipValues = visible; } + const hiddenCountChanged = this.hiddenChipValues.length !== hidden.length; + if (!this.sameChipValues(this.hiddenChipValues, hidden)) { this.hiddenChipValues = hidden; + + if (hiddenCountChanged) { + this.overflowChipWidth = 0; + } } if (hidden.length === 0 && this.overflowDropdownShow) { this.overflowDropdownShow = false; }Also applies to: 1199-1209
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/components/select/select.tsx` around lines 1064 - 1071, The overflow-chip width cache is not being invalidated when the `+N` text changes, so `measureOverflowChipWidth()` can keep returning a stale width after the count grows from one digit to two digits. Update the overflow-state flow in `applyOverflowState` and the overflow measurement logic in `measureOverflowChipWidth` so the cached width is recomputed whenever the overflow count/text changes, and make sure the same fix is applied anywhere else the overflow chip width is reused.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@packages/core/src/components/select/select.tsx`:
- Around line 1064-1071: The overflow-chip width cache is not being invalidated
when the `+N` text changes, so `measureOverflowChipWidth()` can keep returning a
stale width after the count grows from one digit to two digits. Update the
overflow-state flow in `applyOverflowState` and the overflow measurement logic
in `measureOverflowChipWidth` so the cached width is recomputed whenever the
overflow count/text changes, and make sure the same fix is applied anywhere else
the overflow chip width is reused.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 4ecc26e4-bb97-4122-ad27-b4ed9cd81839
📒 Files selected for processing (1)
packages/core/src/components/select/select.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
packages/core/src/components.d.ts (1)
1944-1948: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
hideCloseButtonis missing a@sincetag.This was flagged in a previous review and remains unresolved.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/components.d.ts` around lines 1944 - 1948, The hideCloseButton property in components.d.ts is missing its `@since` annotation; update the JSDoc for the hideCloseButton field in the component declaration to include the appropriate `@since` tag, matching the existing documentation style used for other props in this interface.Source: Path instructions
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/core/src/components/select/select.scss`:
- Line 113: The select stylesheet introduces hard-coded sizing and spacing
values that should be tokenized instead of fixed rems. Update the rules in
select.scss that use max-width and the spacing/width values around the select
component to reference existing design tokens or CSS custom properties rather
than literal rem values. Keep the changes localized to the affected select
styles and use the existing token patterns already used in the component/theme
system.
---
Duplicate comments:
In `@packages/core/src/components.d.ts`:
- Around line 1944-1948: The hideCloseButton property in components.d.ts is
missing its `@since` annotation; update the JSDoc for the hideCloseButton field in
the component declaration to include the appropriate `@since` tag, matching the
existing documentation style used for other props in this interface.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 1c05eac5-4f94-4762-b120-42f9b6b746a8
⛔ Files ignored due to path filters (2)
testing/visual-testing/__screenshots__/tests/select/select.e2e.ts/select-mode-multiple-long-item-label-1-chromium---classic-dark-linux.pngis excluded by!**/*.pngtesting/visual-testing/__screenshots__/tests/select/select.e2e.ts/select-mode-multiple-long-item-label-1-chromium---classic-light-linux.pngis excluded by!**/*.png
📒 Files selected for processing (5)
packages/core/src/components.d.tspackages/core/src/components/filter-chip/filter-chip.scsspackages/core/src/components/select/select.scsstesting/visual-testing/tests/select/mode-multiple-long-item-label/index.htmltesting/visual-testing/tests/select/select.e2e.ts
|
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
packages/core/src/components/select/select.tsx (3)
368-375: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winClose the overflow popup when the control becomes disabled or readonly.
This watcher invalidates measurements, but it leaves
overflowDropdownShowset. If the+Npopup is open whendisabledorreadonlyflips, the popup keeps rendering even though the select should be inert.Suggested fix
watchDisabledReadonly() { // Disabled/readonly hides the chip close button, changing chip widths, so // invalidate the measurement cache to force a re-measure on next render. this.chipWidths.clear(); this.overflowChipWidth = 0; + this.overflowDropdownShow = false; + this.overflowDropdownOpenedByKeyboard = false; }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/components/select/select.tsx` around lines 368 - 375, The watchDisabledReadonly() watcher in select.tsx only clears measurement state, but it should also close the overflow popup when disabled or readonly changes. Update this watcher to reset overflowDropdownShow (and any related popup open state) alongside chipWidths and overflowChipWidth so the +N menu stops rendering when the control becomes inert.
903-927: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winForward
enableTopLayerto the overflow dropdown.
ix-selectalready exposesenableTopLayerfor its popup, but the new overflow dropdown ignores it. In the same clipping/z-index scenarios that require top-layer rendering for the main dropdown, the+Npopup will still be constrained.Suggested fix
<ix-dropdown class="overflow-dropdown" show={this.overflowDropdownShow} + enableTopLayer={this.enableTopLayer} anchor={this.overflowChipRef.waitForCurrent()} closeBehavior="outside" placement="bottom-start"🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/components/select/select.tsx` around lines 903 - 927, The overflow popup rendered by renderOverflowDropdown in select.tsx is missing the existing enableTopLayer behavior, so it can still be clipped in the same z-index/overflow cases as the main dropdown. Update the ix-dropdown used for the overflow dropdown to pass through the select component’s enableTopLayer value, matching the popup configuration already used elsewhere in ix-select.
1197-1207: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winRe-measure the overflow chip when the hidden-count label changes.
measureOverflowChipWidth()stops after the first successful measurement, but the rendered chip text changes as the hidden count changes (+9→+10, etc.). After that first render, overflow calculation keeps using a stale width and can hide too many or too few chips.Suggested fix
+ private measuredOverflowChipText?: string; + private async measureOverflowChipWidth() { - if (this.hiddenChipValues.length === 0 || this.overflowChipWidth > 0) { + const overflowChipText = `+${this.hiddenChipValues.length}`; + + if (this.hiddenChipValues.length === 0) { + this.overflowChipWidth = 0; + this.measuredOverflowChipText = undefined; + return; + } + + if ( + this.overflowChipWidth > 0 && + this.measuredOverflowChipText === overflowChipText + ) { return; } const overflowElement = await this.overflowChipRef.waitForCurrent(); await this.waitForChipLayout([overflowElement]); if (overflowElement.offsetWidth > 0) { this.overflowChipWidth = overflowElement.offsetWidth; + this.measuredOverflowChipText = overflowChipText; } }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/core/src/components/select/select.tsx` around lines 1197 - 1207, The overflow chip width is cached too aggressively in measureOverflowChipWidth(), so it is never updated when the hidden-count label changes (for example, +9 to +10). Adjust the Select component logic to detect label/count changes and re-run the width measurement instead of returning early once overflowChipWidth is set, using the existing measureOverflowChipWidth(), overflowChipWidth, and hiddenChipValues paths to keep the cached width in sync with the rendered chip text.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@packages/core/src/components/select/select.tsx`:
- Around line 368-375: The watchDisabledReadonly() watcher in select.tsx only
clears measurement state, but it should also close the overflow popup when
disabled or readonly changes. Update this watcher to reset overflowDropdownShow
(and any related popup open state) alongside chipWidths and overflowChipWidth so
the +N menu stops rendering when the control becomes inert.
- Around line 903-927: The overflow popup rendered by renderOverflowDropdown in
select.tsx is missing the existing enableTopLayer behavior, so it can still be
clipped in the same z-index/overflow cases as the main dropdown. Update the
ix-dropdown used for the overflow dropdown to pass through the select
component’s enableTopLayer value, matching the popup configuration already used
elsewhere in ix-select.
- Around line 1197-1207: The overflow chip width is cached too aggressively in
measureOverflowChipWidth(), so it is never updated when the hidden-count label
changes (for example, +9 to +10). Adjust the Select component logic to detect
label/count changes and re-run the width measurement instead of returning early
once overflowChipWidth is set, using the existing measureOverflowChipWidth(),
overflowChipWidth, and hiddenChipValues paths to keep the cached width in sync
with the rendered chip text.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: 43cf0b6b-6e19-47ad-8eec-1d43d600878e
📒 Files selected for processing (2)
.changeset/lucky-schools-enter.mdpackages/core/src/components/select/select.tsx
2 participants
IX-3720
💡 What is the current behavior?
Overflowing chips break into new line when select is in mode="multiple"
🆕 What is the new behavior?
Overflowing chips are hidden and a new chip is displayed, indicating how many items are hidden. The chip can be clicked/accessed by keyboard to view/remove the hidden items.
🏁 Checklist
A pull request can only be merged if all of these conditions are met (where applicable):
pnpm test)pnpm lint)pnpm build, changes pushed)Summary by CodeRabbit
ix-selectmultiple mode overflow handling: selected items stay in one row and collapse into a non-removable “+N” indicator.ariaLabelMoreItemsfor the overflow indicator’s accessible label, and addedhideCloseButtontoix-filter-chip.