Is this a regression?
Description
daff-menu focuses its first menu item every time it opens, and the item's theme styling keys off bare :focus. Opening the menu with a mouse click or a tap ends up displaying the focused background, as though it were already selected.
Environment
- Daffodil version: 0.94.1
- Angular version: 21
- Browser(s):
- Node version: run
node --version
- Operating system:
Steps to reproduce
- Render a
[daffMenuActivator] button with a daff-menu containing two or more daff-menu-item elements.
- Click the activator with a mouse.
- Look at the first menu item.
Expected behavior
Opening the menu with a pointer should not have any items showing the focus highlight style. Opening it from the keyboard (Enter or Space on the activator) highlights the first item so it's clear where arrow-key navigation starts.
Actual behavior
The first menu item is highlighted no matter how the menu was opened, so a pointer-opened menu looks like it already has a selection.
Additional context
The fix is to track the open origin and let it decide how the focus looks:
DaffMenuActivatorDirective should record what it was last interacted with and passes it to DaffMenuService.open()
DaffMenuService should expose it as origin.
DaffMenuComponent should call setFocusOrigin(origin).setFirstItemActive(), falling back to focusing the menu itself when there are no items so Escape still closes it.
DaffMenuItemComponent and DaffBreadcrumbMenuItemDirective should monitor themselves with FocusMonitor and forward the origin through focusVia.
menu-theme.scss should style .cdk-keyboard-focused instead of :focus.
Breadcrumb needs to be updated because DaffBreadcrumbMenuItemDirective adds the daff-menu-item class to the element it projects.
Once the highlight moves from :focus to .cdk-keyboard-focused, an item is only highlighted if FocusMonitor is monitoring it and the origin is forwarded through focusVia. The breadcrumb directive's focus() does neither, so leaving it alone would drop the focus highlight from breadcrumb menus entirely.
Is this a regression?
Description
daff-menufocuses its first menu item every time it opens, and the item's theme styling keys off bare:focus. Opening the menu with a mouse click or a tap ends up displaying the focused background, as though it were already selected.Environment
node --versionSteps to reproduce
[daffMenuActivator]button with adaff-menucontaining two or moredaff-menu-itemelements.Expected behavior
Opening the menu with a pointer should not have any items showing the focus highlight style. Opening it from the keyboard (Enter or Space on the activator) highlights the first item so it's clear where arrow-key navigation starts.
Actual behavior
The first menu item is highlighted no matter how the menu was opened, so a pointer-opened menu looks like it already has a selection.
Additional context
The fix is to track the open origin and let it decide how the focus looks:
DaffMenuActivatorDirectiveshould record what it was last interacted with and passes it toDaffMenuService.open()DaffMenuServiceshould expose it asorigin.DaffMenuComponentshould callsetFocusOrigin(origin).setFirstItemActive(), falling back to focusing the menu itself when there are no items so Escape still closes it.DaffMenuItemComponentandDaffBreadcrumbMenuItemDirectiveshould monitor themselves withFocusMonitorand forward the origin throughfocusVia.menu-theme.scssshould style.cdk-keyboard-focusedinstead of:focus.Breadcrumb needs to be updated because
DaffBreadcrumbMenuItemDirectiveadds thedaff-menu-itemclass to the element it projects.Once the highlight moves from
:focusto.cdk-keyboard-focused, an item is only highlighted ifFocusMonitoris monitoring it and the origin is forwarded throughfocusVia. The breadcrumb directive'sfocus()does neither, so leaving it alone would drop the focus highlight from breadcrumb menus entirely.