CS-10688: Add selected items summary section to Picker dropdown#4367
CS-10688: Add selected items summary section to Picker dropdown#4367
Conversation
Preview deployments |
Host Test Results 1 files + 1 1 suites +1 4h 36m 18s ⏱️ + 4h 36m 18s For more details on these errors, see this check. Results for commit d54843a. ± Comparison against base commit 3a405f1. ♻️ This comment has been updated with latest results. |
Replace reorder-based approach with a "shopping cart" pattern: - Selected items shown in a summary section at the top of the dropdown - Main option list stays in original order (never reorders) - Select-all rendered in before-options section above the summary - Users can toggle selection from both summary and main list Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
FadhlanR
force-pushed
the
cs-10688-defer-reordering-selected-items-to-top-until-dropdown-is-reopened
branch
from
577099b to
09b4592
Compare
FadhlanR
changed the title
…top-until-dropdown-is-reopened
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1d9091a6d9
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Closing the picker now also calls onSearchTermChange('') so that
server-search consumers (e.g. TypePicker) reset their query state,
preventing stale filtered results on reopen.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR updates the Boxel Picker component to stop reordering selected items in the dropdown and instead display selected items in a dedicated summary section above the main options list, keeping the main list stable during multi-select interactions.
Changes:
- Replaced selected-item reordering/pinning behavior with a “selected items summary” rendered in the before-options area.
- Adjusted Picker filtering so the main list stays in original order (and is filtered by search term) while the summary remains visible.
- Updated host + boxel-ui integration tests to reflect the new DOM structure and behaviors.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/host/tests/integration/components/operator-mode-ui-test.gts | Updates type-picker option counting/selectors to only count main-list options. |
| packages/boxel-ui/test-app/tests/integration/components/picker-test.gts | Rewrites Picker integration tests to validate summary + stable ordering + new click targets. |
| packages/boxel-ui/addon/src/components/picker/option-row.gts | Removes hover/pinning-related event handling from option row. |
| packages/boxel-ui/addon/src/components/picker/index.gts | Implements stable main list (displayOptions), selected summary plumbing, and resets search on close. |
| packages/boxel-ui/addon/src/components/picker/before-options-with-search.gts | Adds select-all button + selected-items summary UI and divider in before-options. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| this.searchTerm = ''; | ||
| this.args.onSearchTermChange?.(''); |
| padding: 0 var(--boxel-sp-2xs); | ||
| box-sizing: border-box; | ||
| } | ||
|
|
Summary
Problem: The previous Picker reordered selected items to the top of the dropdown list. When a user selected an item and moved their cursor away, the item would jump to the top of the list. This caused confusion because:
Solution: Replace the reorder-based approach with a "shopping cart" pattern:
PickerOptionRowfor visual consistency)Screen.Recording.2026-04-10.at.16.43.06.mov
Test plan
pnpm lintin boxel-ui/addon)🤖 Generated with Claude Code