Skip to content

Commit 8ae8c02

Browse files
Elliott Marquezcopybara-github
authored andcommitted
fix(menu,select): enter clicks href items
PiperOrigin-RevId: 571104363
1 parent 43af3ba commit 8ae8c02

File tree

3 files changed

+23
-2
lines changed

3 files changed

+23
-2
lines changed

menu/internal/controllers/menuItemController.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,13 @@ export interface MenuItemControllerConfig {
6767
* A function that returns the headline element of the menu item.
6868
*/
6969
getHeadlineElements: () => HTMLElement[];
70+
71+
/**
72+
* The HTML Element that accepts user interactions like click. Used for
73+
* occasions like programmatically clicking anchor tags when `Enter` is
74+
* pressed.
75+
*/
76+
getInteractiveElement: () => HTMLElement | null;
7077
}
7178

7279
/**
@@ -77,6 +84,8 @@ export class MenuItemController implements ReactiveController {
7784
private internalTypeaheadText: string|null = null;
7885
private readonly getHeadlineElements:
7986
MenuItemControllerConfig['getHeadlineElements'];
87+
private readonly getInteractiveElement:
88+
MenuItemControllerConfig['getInteractiveElement'];
8089

8190
/**
8291
* @param host The MenuItem in which to attach this controller to.
@@ -87,8 +96,10 @@ export class MenuItemController implements ReactiveController {
8796
config: MenuItemControllerConfig) {
8897
const {
8998
getHeadlineElements,
99+
getInteractiveElement,
90100
} = config;
91101
this.getHeadlineElements = getHeadlineElements;
102+
this.getInteractiveElement = getInteractiveElement;
92103
this.host.addController(this);
93104
}
94105

@@ -164,6 +175,14 @@ export class MenuItemController implements ReactiveController {
164175
* menu.
165176
*/
166177
onKeydown = (event: KeyboardEvent) => {
178+
// Check if the interactive element is an anchor tag. If so, click it.
179+
if (this.host.href && event.code === 'Enter') {
180+
const interactiveElement = this.getInteractiveElement();
181+
if (interactiveElement instanceof HTMLAnchorElement) {
182+
interactiveElement.click();
183+
}
184+
}
185+
167186
if (this.host.keepOpen || event.defaultPrevented) return;
168187
const keyCode = event.code;
169188

menu/internal/menuitem/menu-item.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@ export class MenuItemEl extends LitElement implements MenuItem {
8383
private readonly menuItemController = new MenuItemController(this, {
8484
getHeadlineElements: () => {
8585
return this.headlineElements;
86-
}
86+
},
87+
getInteractiveElement: () => this.listItemRoot,
8788
});
8889

8990
protected override render() {

select/internal/selectoption/select-option.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,8 @@ export class SelectOptionEl extends LitElement implements SelectOption {
9191
private readonly selectOptionController = new SelectOptionController(this, {
9292
getHeadlineElements: () => {
9393
return this.headlineElements;
94-
}
94+
},
95+
getInteractiveElement: () => this.listItemRoot,
9596
});
9697

9798
protected override render() {

0 commit comments

Comments
 (0)