Skip to content

Input select: display selected icons fix. - #1113

Merged
tovebr merged 2 commits into
masterfrom
input-select-display-icons-fix
Aug 4, 2026
Merged

Input select: display selected icons fix.#1113
tovebr merged 2 commits into
masterfrom
input-select-display-icons-fix

Conversation

@tovebr

@tovebr tovebr commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

I previously fixed overflow not being cutoff and displayed with ellipsis in input-select, that fix broke displaying of icons:
image

This fixes that:
image

@tovebr tovebr self-assigned this Aug 4, 2026
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Aug 4, 2026

Copy link
Copy Markdown

Deploying smoothly with  Cloudflare Pages  Cloudflare Pages

Latest commit: a45eace
Status: ✅  Deploy successful!
Preview URL: https://f46a804f.smoothly.pages.dev
Branch Preview URL: https://input-select-display-icons-f.smoothly.pages.dev

View logs

@tovebr
tovebr force-pushed the input-select-display-icons-fix branch from 0c1f25b to a45eace Compare August 4, 2026 07:28
@tovebr
tovebr requested review from AntonCroner and EliasEriksson and a lite review from Copilot and removed request for EliasEriksson August 4, 2026 07:56

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes how selected values (including icons) are rendered/truncated in smoothly-input-select after a prior ellipsis/overflow change.

Changes:

  • Adjusts the selected-value wrapper markup (.value) and updates CSS to apply min-width: 0 + ellipsis behavior correctly.
  • Updates displaySelected() to clone selected items and force smoothly-icon elements to render inline (inline-flex) so they appear correctly in the selected-value display.
  • Changes multi-selected value joining to use a spacing separator instead of a comma.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
src/components/input/select/style.css Targets ellipsis/overflow styling specifically to the selected value container (.value) and ensures it can shrink within a flex row.
src/components/input/select/index.tsx Ensures selected icons display correctly by adjusting cloned icon styles and renders selected values within a dedicated .value element.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/components/input/select/index.tsx
@tovebr
tovebr merged commit d379453 into master Aug 4, 2026
6 checks passed
@tovebr
tovebr deleted the input-select-display-icons-fix branch August 4, 2026 08:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants