Skip to content

Commit b0809ec

Browse files
committed
fix(cdk/menu): enable inline popover
inline menu trigger
1 parent 0efecb4 commit b0809ec

File tree

3 files changed

+15
-1
lines changed

3 files changed

+15
-1
lines changed

src/cdk/menu/context-menu-trigger.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
137137
positionStrategy: this._getOverlayPositionStrategy(coordinates),
138138
scrollStrategy: this.menuScrollStrategy(),
139139
direction: this._directionality || undefined,
140+
usePopover: true,
140141
});
141142
}
142143

@@ -150,6 +151,7 @@ export class CdkContextMenuTrigger extends CdkMenuTriggerBase implements OnDestr
150151
return createFlexibleConnectedPositionStrategy(this._injector, coordinates)
151152
.withLockedPosition()
152153
.withGrowAfterOpen()
154+
.withPopoverLocation('inline')
153155
.withPositions(this.menuPosition ?? CONTEXT_MENU_POSITIONS);
154156
}
155157

src/cdk/menu/menu-bar.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88

9-
import {AfterContentInit, Directive} from '@angular/core';
9+
import {inject, AfterContentInit, Directive, ElementRef} from '@angular/core';
1010
import {
1111
DOWN_ARROW,
1212
ESCAPE,
@@ -16,6 +16,7 @@ import {
1616
TAB,
1717
UP_ARROW,
1818
} from '../keycodes';
19+
import {_getEventTarget} from '../platform';
1920
import {takeUntil} from 'rxjs/operators';
2021
import {CdkMenuGroup} from './menu-group';
2122
import {CDK_MENU} from './menu-interface';
@@ -43,6 +44,8 @@ import {CdkMenuBase} from './menu-base';
4344
],
4445
})
4546
export class CdkMenuBar extends CdkMenuBase implements AfterContentInit {
47+
private readonly _elementRef: ElementRef<HTMLElement> = inject(ElementRef);
48+
4649
/** The direction items in the menu flow. */
4750
override readonly orientation = 'horizontal';
4851

@@ -60,6 +63,13 @@ export class CdkMenuBar extends CdkMenuBase implements AfterContentInit {
6063
*/
6164
_handleKeyEvent(event: KeyboardEvent) {
6265
const keyManager = this.keyManager;
66+
67+
const element = this._elementRef.nativeElement;
68+
const target = _getEventTarget(event) as HTMLElement;
69+
if (target !== element && target.parentElement !== element) {
70+
return;
71+
}
72+
6373
switch (event.keyCode) {
6474
case UP_ARROW:
6575
case DOWN_ARROW:

src/cdk/menu/menu-trigger.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -276,6 +276,7 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnChanges, OnD
276276
positionStrategy: this._getOverlayPositionStrategy(),
277277
scrollStrategy: this.menuScrollStrategy(),
278278
direction: this._directionality || undefined,
279+
usePopover: true,
279280
});
280281
}
281282

@@ -284,6 +285,7 @@ export class CdkMenuTrigger extends CdkMenuTriggerBase implements OnChanges, OnD
284285
return createFlexibleConnectedPositionStrategy(this._injector, this._elementRef)
285286
.withLockedPosition()
286287
.withFlexibleDimensions(false)
288+
.withPopoverLocation('inline')
287289
.withPositions(this._getOverlayPositions());
288290
}
289291

0 commit comments

Comments
 (0)