main - 8ae1431 docs(cdk/overlay): keep state in sync in example (#30237)

angular · Jan 3, 2025 · 5f190b8 · 5f190b8
1 parent a21424e
commit 5f190b8
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 5 deletions.
diff --git a/fesm2022/menu.mjs b/fesm2022/menu.mjs
@@ -4,7 +4,7 @@ import { Overlay, OverlayConfig, STANDARD_DROPDOWN_BELOW_POSITIONS, STANDARD_DRO
 import { ENTER, SPACE, UP_ARROW, hasModifierKey, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, TAB, ESCAPE } from '@angular/cdk/keycodes';
 import { startWith, debounceTime, distinctUntilChanged, takeUntil, mergeMap, mapTo, mergeAll, switchMap, skipWhile, skip } from 'rxjs/operators';
 import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
-import { _IdGenerator, InputModalityDetector, FocusKeyManager } from '@angular/cdk/a11y';
+import { _IdGenerator, InputModalityDetector, FocusMonitor, FocusKeyManager } from '@angular/cdk/a11y';
 import { Subject, merge, partition } from 'rxjs';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { Directionality } from '@angular/cdk/bidi';
@@ -1155,6 +1155,7 @@ class PointerFocusTracker {
  * This class can be extended to create custom menu types.
  */
 class CdkMenuBase extends CdkMenuGroup {
+    _focusMonitor = inject(FocusMonitor);
     ngZone = inject(NgZone);
     _renderer = inject(Renderer2);
     /** The menu's native DOM host element. */
@@ -1195,12 +1196,14 @@ class CdkMenuBase extends CdkMenuGroup {
             this.menuStack.push(this);
         }
         this._setKeyManager();
+        this._handleFocus();
         this._subscribeToMenuStackHasFocus();
         this._subscribeToMenuOpen();
         this._subscribeToMenuStackClosed();
         this._setUpPointerTracker();
     }
     ngOnDestroy() {
+        this._focusMonitor.stopMonitoring(this.nativeElement);
         this.keyManager?.destroy();
         this.destroyed.next();
         this.destroyed.complete();
@@ -1301,8 +1304,21 @@ class CdkMenuBase extends CdkMenuGroup {
             this.menuAim.initialize(this, this.pointerTracker);
         }
     }
+    /** Handles focus landing on the host element of the menu. */
+    _handleFocus() {
+        this._focusMonitor
+            .monitor(this.nativeElement, false)
+            .pipe(takeUntil(this.destroyed))
+            .subscribe(origin => {
+            // Don't forward focus on mouse interactions, because it can
+            // mess with the user's scroll position. See #30130.
+            if (origin !== null && origin !== 'mouse') {
+                this.focusFirstItem(origin);
+            }
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: CdkMenuBase, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0-next.3", type: CdkMenuBase, isStandalone: true, inputs: { id: "id" }, host: { attributes: { "role": "menu" }, listeners: { "focus": "focusFirstItem()", "focusin": "menuStack.setHasFocus(true)", "focusout": "menuStack.setHasFocus(false)" }, properties: { "tabindex": "_getTabIndex()", "id": "id", "attr.aria-orientation": "orientation", "attr.data-cdk-menu-stack-id": "menuStack.id" } }, queries: [{ propertyName: "items", predicate: CdkMenuItem, descendants: true }], usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0-next.3", type: CdkMenuBase, isStandalone: true, inputs: { id: "id" }, host: { attributes: { "role": "menu" }, listeners: { "focusin": "menuStack.setHasFocus(true)", "focusout": "menuStack.setHasFocus(false)" }, properties: { "tabindex": "_getTabIndex()", "id": "id", "attr.aria-orientation": "orientation", "attr.data-cdk-menu-stack-id": "menuStack.id" } }, queries: [{ propertyName: "items", predicate: CdkMenuItem, descendants: true }], usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3", ngImport: i0, type: CdkMenuBase, decorators: [{
             type: Directive,
@@ -1314,7 +1330,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3",
                         '[id]': 'id',
                         '[attr.aria-orientation]': 'orientation',
                         '[attr.data-cdk-menu-stack-id]': 'menuStack.id',
-                        '(focus)': 'focusFirstItem()',
                         '(focusin)': 'menuStack.setHasFocus(true)',
                         '(focusout)': 'menuStack.setHasFocus(false)',
                     },

diff --git a/fesm2022/menu.mjs.map b/fesm2022/menu.mjs.map
diff --git a/fesm2022/scrolling.mjs b/fesm2022/scrolling.mjs
@@ -1385,6 +1385,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0-next.3",
 class CdkVirtualScrollableWindow extends CdkVirtualScrollable {
     constructor() {
         super();
+        const document = inject(DOCUMENT);
         this.elementRef = new ElementRef(document.documentElement);
         this._scrollElement = document;
     }

diff --git a/fesm2022/scrolling.mjs.map b/fesm2022/scrolling.mjs.map
diff --git a/menu/index.d.ts b/menu/index.d.ts
@@ -152,6 +152,7 @@ export declare class CdkMenuBar extends CdkMenuBase implements AfterContentInit
  * This class can be extended to create custom menu types.
  */
 export declare abstract class CdkMenuBase extends CdkMenuGroup implements Menu, AfterContentInit, OnDestroy {
+    private _focusMonitor;
     protected ngZone: NgZone;
     private _renderer;
     /** The menu's native DOM host element. */
@@ -223,6 +224,8 @@ export declare abstract class CdkMenuBase extends CdkMenuGroup implements Menu,
      * with the latest menu item under mouse focus.
      */
     private _setUpPointerTracker;
+    /** Handles focus landing on the host element of the menu. */
+    private _handleFocus;
     static ɵfac: i0.ɵɵFactoryDeclaration<CdkMenuBase, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkMenuBase, never, never, { "id": { "alias": "id"; "required": false; }; }, {}, ["items"], never, true, never>;
 }