fix(visualization): auto-close File Explorer sort dropdown - #4478
Conversation
Migrate the daisyUI sort dropdown from pure-CSS focus-within to a controlled signal pattern (isOpen + document:click HostListener), matching MapSelector / DeltaSelector. The menu now closes after the user picks a sort key, toggles the order, or clicks outside. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
📝 WalkthroughWalkthroughThis PR adds auto-close functionality to the File Explorer sort dropdown by converting it from a CSS-driven dropdown to a controlled-signal pattern. The implementation adds an ChangesExplorer Sort Dropdown Auto-Close
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@plans/2026-05-06-explorer-sort-dropdown-auto-close.md`:
- Line 59: Add explicit language identifiers to the three fenced code blocks
(lines showing the dropdown ASCII art and the component snippet) to satisfy
MD040: change the plain ``` fences to ```text for the two ASCII UI examples (the
block showing the dropdown before and after selection) and to ```ts for the
TypeScript/Angular-like snippet (the block containing isOpen = signal(false),
`@HostListener`, toggleOpen(), etc.); update the three fences that currently are
just ``` to use those language tags so markdown linting passes.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: b43b9cac-8fba-4ada-ab3b-861b7881ff57
📒 Files selected for processing (5)
plans/2026-05-06-explorer-sort-dropdown-auto-close.mdvisualization/CHANGELOG.mdvisualization/app/codeCharta/features/sidebarExplorer/components/explorerSortControl/explorerSortControl.component.htmlvisualization/app/codeCharta/features/sidebarExplorer/components/explorerSortControl/explorerSortControl.component.spec.tsvisualization/app/codeCharta/features/sidebarExplorer/components/explorerSortControl/explorerSortControl.component.ts
|
|
||
| ### Before — bug | ||
|
|
||
| ``` |
There was a problem hiding this comment.
Add language identifiers to fenced code blocks to satisfy markdown linting.
Line 59, Line 72, and Line 91 use fenced blocks without a language tag (MD040).
🛠️ Suggested patch
-```
+```text
Sort: Name ▾ ↓ ← user clicks dropdown
┌────────────────────────────┐
│ Name │ ← user clicks "Number of files"
│ Number of files │ ← dropdown STAYS OPEN
│ Area Size │
│ ────────────────────────── │
│ ↑ Sort descending │
└────────────────────────────┘- +text
Sort: Name ▾ ↓ ← user clicks dropdown (open)
┌────────────────────────────┐
│ Name │
│ Number of files │ ← user clicks "Number of files"
│ Area Size │
│ ────────────────────────── │
│ ↑ Sort descending │
└────────────────────────────┘
Sort: Number of files ▾ ↓ ← dropdown CLOSED, label updated
-```
+```ts
isOpen = signal(false)
[class.dropdown-open]="isOpen()" on outer .dropdown
`@if` (isOpen()) { <dropdown-content/> } ← optional but matches the two reference components
`@HostListener`("document:click") ← close on outside click
toggleOpen() / item-handlers .set(false) on dropdown close
</details>
Also applies to: 72-72, 91-91
<details>
<summary>🧰 Tools</summary>
<details>
<summary>🪛 markdownlint-cli2 (0.22.1)</summary>
[warning] 59-59: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
</details>
</details>
<details>
<summary>🤖 Prompt for AI Agents</summary>
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In @plans/2026-05-06-explorer-sort-dropdown-auto-close.md at line 59, Add
explicit language identifiers to the three fenced code blocks (lines showing the
dropdown ASCII art and the component snippet) to satisfy MD040: change the plain
fences totext for the two ASCII UI examples (the block showing the
dropdown before and after selection) and to ts for the TypeScript/Angular-like snippet (the block containing isOpen = signal(false), `@HostListener`, toggleOpen(), etc.); update the three fences that currently are just to use those language tags so markdown linting passes.
</details>
<!-- fingerprinting:phantom:poseidon:hawk -->
<!-- d98c2f50 -->
<!-- This is an auto-generated comment by CodeRabbit -->
2 participants
Migrate the daisyUI sort dropdown from pure-CSS focus-within to a controlled signal pattern (isOpen + document:click HostListener), matching MapSelector / DeltaSelector. The menu now closes after the user picks a sort key, toggles the order, or clicks outside.
{Meaningful title}
Please read the CONTRIBUTING.md before opening a PR.
Closes: #
Description
Descriptive pull request text, answering:
Definition of Done
A PR is only ready for merge once all the following acceptance criteria are fulfilled:
Screenshots or gifs
Summary by CodeRabbit