angular/components · error · Error

expected an instance of PointerFocusTracker to be provided

Error message

expected an instance of PointerFocusTracker to be provided

What it means

CDK menu directives require an instance of PointerFocusTracker to be configured. throwMissingPointerFocusTracker is raised from _checkConfigured when the expected tracker is missing — i.e. a menu's required sibling/parent pieces (cdkMenu triggers, menubar, or menu-group wiring) were not assembled correctly.

Source

Thrown at src/cdk/menu/menu-errors.ts:14

/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.dev/license
 */

/**
 * Throws an exception when an instance of the PointerFocusTracker is not provided.
 * @docs-private
 */
export function throwMissingPointerFocusTracker() {
  throw Error('expected an instance of PointerFocusTracker to be provided');
}

/**
 * Throws an exception when a reference to the parent menu is not provided.
 * @docs-private
 */
export function throwMissingMenuReference() {
  throw Error('expected a reference to the parent menu');
}

View on GitHub (pinned to 0411926e7d)

Solutions

1. Place cdkMenuItem inside a cdkMenu (or cdkMenuBar) element so the PointerFocusTracker is provided by the menu context.
2. If building a submenu, nest cdkMenu inside the parent menu structure rather than standalone.
3. Restore the surrounding wrapper markup if a refactor removed the cdkMenu host element.
4. Check that you're not overriding the menu directives' providers in a custom component.

Example fix

// before
<div>
  <button cdkMenuItem>Open</button> <!-- no cdkMenu context -->
</div>
// after
<div cdkMenu>
  <button cdkMenuItem>Open</button>
</div>

import { CdkMenu } from '@angular/cdk/menu';
// Ensure the host component declares or inherits a cdkMenu/cdkMenuBar ancestor
const hasMenuContext = !!injector.get(CdkMenu, null);
if (!hasMenuContext) {
  console.error('cdkMenuItem used outside cdkMenu/cdkMenuBar');
}

function hasMenuAncestor(el: HTMLElement): boolean {
  return !!el.closest('[cdkMenu], [cdkMenuBar]');
}

try {
  this._checkConfigured();
} catch (e) {
  if ((e as Error).message.includes('PointerFocusTracker')) {
    console.error('Wrap the item in cdkMenu or cdkMenuBar.');
  } else { throw e; }
}

When it happens

Trigger: Using cdkMenuItem / cdkMenuGroup outside a cdkMenu or cdkMenuBar context so the injected PointerFocusTracker is undefined; manually instantiating menu directives without the surrounding menu infrastructure.

Common situations: Copy-pasting a submenu template without its parent cdkMenu; using menu item directives inside a plain div instead of cdkMenu; version upgrades where directive wiring changed.

Related errors

• expected a reference to the parent menu
• Cannot attach component portal to outlet without an Applicat
• ListKeyManager constructed with a signal must receive an inj
• KeyManager items in typeahead mode must implement the `getLa
• CdkDropList could not find an element container matching the

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/331b41a9a4106af4. Report an issue: GitHub.