Skip to content

fix(model-dropdown): rotate the chevron when the menu opens - #1393

Merged
philmerrell merged 1 commit into
developfrom
feature/model-dropdown-chevron
Sep 30, 2026
Merged

philmerrell merged 1 commit into
developfrom
feature/model-dropdown-chevron

Conversation

@philmerrell

Copy link
Copy Markdown
Contributor

Problem

The model picker's chevron never rotated when its menu opened. The (opened) and (closed) bindings sat on the cdkMenu panel, but CdkMenu only has a closed output. Angular treated (opened) as a plain DOM event listener that never fires, so onMenuOpened() never ran and [class.rotate-180]="isMenuOpen()" stayed false.

Fix

  • Move both handlers to the trigger button as (cdkMenuOpened) / (cdkMenuClosed), the CdkMenuTrigger outputs (outputs: ['opened: cdkMenuOpened', 'closed: cdkMenuClosed'] in @angular/cdk/fesm2022/menu.mjs). This matches the notification bell's menu.
  • Drop the dead bindings from the cdkMenu panel.
  • Hold the open state in a signal instead of a plain field, per the frontend's signal-state convention. The component is OnPush.

Tests

Two new specs in model-dropdown.component.spec.ts:

  • The chevron gains rotate-180 after clicking the trigger and loses it after a second click closes the menu.
  • The chevron resets when choosing a model closes the menu.

Both specs fail against the old panel bindings and pass with the fix. The full dropdown spec file passes (16 tests):

npx ng test --watch=false --include 'src/app/components/model-dropdown/*.spec.ts'

🤖 Generated with Claude Code

The (opened)/(closed) bindings sat on the cdkMenu panel. CdkMenu has no
opened output, so Angular bound a plain DOM listener that never fired:
the open flag never became true and the trigger's chevron never rotated.

Move both handlers to the trigger as (cdkMenuOpened)/(cdkMenuClosed),
the CdkMenuTrigger outputs, and hold the open state in a signal. Specs
cover the chevron rotating on open and resetting on close, both from a
second trigger click and from choosing a model.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@philmerrell
philmerrell merged commit 0e06fb5 into develop Sep 30, 2026
7 checks passed
@philmerrell
philmerrell deleted the feature/model-dropdown-chevron branch September 30, 2026 16:48
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.

1 participant