Show the active selector as pills instead of raw wrapped text - #909
Merged
Merged
Conversation
SAutocomplete gains an opt-in 'chips' mode: when not focused, a comma-separated value renders as individual pills (matching the dropdown list item's chip style) instead of plain wrapped text, while the underlying textarea stays fully editable — clicking the pills (or just tabbing/focusing in) reveals the raw text again so manual editing still works exactly as before.
…aying The chips were absolutely positioned over the textarea, so the pill's height followed the textarea's auto-grow instead of the (potentially taller, differently-wrapped) chip content, clipping the last row. Rendering only one of the two (v-if/v-else) as a normal flex child lets the container size to whichever is actually showing.
Left/bottom padding on the selector's pill display now matches top. The .chip style was duplicated verbatim between the dropdown list item and the new pill display — extracted into a shared SChip component used by both.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Test plan
yarn typecheck/yarn lint/yarn test(260/260)🤖 Generated with Claude Code