bug(cdkContextMenu): First item focus:visible and gets ring design

[ShaharKrichli]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Im building a context menu using spartan/ui which uses cdk context menu.
On first open through a right click first item gets focus (which he should), but he also receive focus:visible ring design.
after a click on some menu item, or on a selectable item in the screen, this behavior is gone.

This behavior exist in angular context menu example, regardless of spartan or my implementation

Reproduction

StackBlitz link: https://stackblitz.com/run?file=src%2Fexample%2Fcdk-menu-nested-context-example.ts
Steps to reproduce:

1. Right click on the context menu
2. ring design is applied
3. click on any of the items
4. open context menu again using right click
5. ring design isnt there, but item is still focused

Expected Behavior

on first open of the context menu, first item will be focused but not focus:visible so ring design wont be shown

Actual Behavior

on first open of the context menu, first item is focus:visible so gets shown the ring design of focus:visible

Environment

• Angular: 20.1
• CDK/Material: 20.1
• Browser(s): chrome
• Operating System - Macos

[crisbeto]

The linked Stackblitz doesn't work, but it's worth noting that this is likely the browser's behavior around the focus ring since the CDK menu doesn't come with any built-in styles.

[OmerGronich]

@crisbeto

The linked Stackblitz doesn't work, but it's worth noting that this is likely the browser's behavior around the focus ring since the CDK menu doesn't come with any built-in styles.

I was surprised to see this issue closed. This is definitely a real bug in the Angular CDK context menu. It's easily reproducible in the official documentation:

469839461-65f7269f-3378-4328-b012-dc7b4f7f9c0f.mov

the same interaction pattern is fully deterministic in other headless context‑menu implementations:

• ZagJS

• Radix UI

• Ariakit

• Base UI

I believe the issue isn’t the browser’s :focus-visible heuristic itself, but rather the sequence of events the CDK sends to it.

I understand that maintainers have to prioritize, but I do hope this can be revisited. This is a real UX concern that affects the perceived reliability of the component. Since the behavior is sporadic and impossible to predict it makes all workarounds pretty brittle and hacky.

Thanks again for your time and for all the work you and the team put into the CDK.

[crisbeto]

My understanding is that we can't control when this happens, it's up to the browser. We just render out the overlay and call .focus on the first item.