Skip to content

fix: ensure dropdown width respects trigger size and truncates long option labels#6890

Open
michaelmkraus wants to merge 7 commits into
mainfrom
fix-custom-select-dropdown-wrapping
Open

fix: ensure dropdown width respects trigger size and truncates long option labels#6890
michaelmkraus wants to merge 7 commits into
mainfrom
fix-custom-select-dropdown-wrapping

Conversation

@michaelmkraus
Copy link
Copy Markdown
Contributor

@michaelmkraus michaelmkraus commented Jun 3, 2026

Proposed changes

Fixes the dropdownWidth="auto" behavior in DBCustomSelect where the dropdown menu collapsed to its minimum width instead of sizing to content, and long option labels wrapped uncontrollably instead of being truncated.

Root cause (3 gaps identified):

  • Missing CSS block: No &[data-width="auto"] selector existed in custom-select-dropdown.scss, so the dropdown had no defined inline-size and collapsed to min-inline-size.
  • No trigger-width sync: handleFixedDropdown only synced width for full mode. When switching to position: fixed, the auto dropdown lost all reference to its trigger's width.
  • No text truncation: List-item labels had no white-space: nowrap / text-overflow: ellipsis, causing multi-line wrapping in narrow dropdowns.

Changes:

  • custom-select-dropdown.scss — Added &[data-width="auto"] { inline-size: max-content; }. The existing max-inline-size viewport guard prevents overflow.
  • floating-components.ts — Set element.style.minInlineSize = ${width}px for auto mode so the dropdown is never narrower than its trigger.
  • custom-select-list-item.scss — Added white-space: nowrap; overflow: hidden; text-overflow: ellipsis; on > label for single-line truncation.
  • New showcase — dropdown-width-auto.example.lite.tsx with 4 edge-case scenarios (long text, wide trigger/short options, narrow trigger/long options, mixed lengths) to visually reproduce and regression-test the bug.

resolves #6250

Checklist

Code Quality

  • I have reviewed my own code (self-review), including the screen- and snapshots
  • I have reviewed my changes locally with an AI assistant (e.g. GitHub Copilot, Kiro, etc.)
  • No hardcoded values, magic numbers, or debug code left in

Validation

  • I have added/updated tests that cover my changes
  • I have tested across all relevant frameworks (React, Angular, Vue) if applicable

General

  • The PR title follows the conventional commits format (e.g. feat:, fix:, chore:), as in Git Commit Conventions
  • If architecture, structure, or conventions changed inside a packages/* folder, the corresponding AGENTS.md has been updated

🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/fix-custom-select-dropdown-wrapping

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Jun 3, 2026

🦋 Changeset detected

Latest commit: 7575d77

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages
Name Type
@db-ux/core-components Patch
@db-ux/ngx-core-components Patch
@db-ux/react-core-components Patch
@db-ux/wc-core-components Patch
@db-ux/v-core-components Patch
@db-ux/core-foundations Patch
@db-ux/core-stylelint Patch
@db-ux/core-migration Patch
@db-ux/agent-cli Patch
@db-ux/core-eslint-plugin Patch
@db-ux/core-vite-plugin Patch
@db-ux/core-postcss-plugin Patch
@db-ux/mcp-server Patch

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

@michaelmkraus michaelmkraus changed the title feat: add showcase to validate issue fix: ensure dropdown width respects trigger size and truncates long option labels Jun 3, 2026
@github-actions github-actions Bot added the 📕documentation Improvements or additions to documentation label Jun 3, 2026
github-actions Bot and others added 2 commits June 3, 2026 12:42
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@michaelmkraus michaelmkraus marked this pull request as ready for review June 3, 2026 14:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🏘components ⏏️custom-select 📕documentation Improvements or additions to documentation

Projects

Status: 🏗 In progress

Development

Successfully merging this pull request may close these issues.

DBCustomSelect: Dropdown width with dropdownWidth="auto" text sometimes wraps unexpectedly

2 participants