) => void;
/**
* Emitted when a menu item is selected.
*/
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
index d112f63c..b729acde 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/dropdown/dropdown.tsx
@@ -323,7 +323,6 @@ export class Dropdown {
// Other keys bring focus to the menu and initiate type-to-select behavior
const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];
if (this.open && menu && !ignoredKeys.includes(event.key)) {
- menu.setFocus();
menu.typeToSelect(event.key);
return;
}
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
index 7ed7f20f..7df317c2 100644
--- a/src/components/menu/menu.tsx
+++ b/src/components/menu/menu.tsx
@@ -1,4 +1,4 @@
-import { Component, Element, Event, EventEmitter, Method, State, h } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, Method, h } from '@stencil/core';
import { getTextContent } from '../../utilities/slot';
/**
@@ -22,14 +22,6 @@ export class Menu {
@Element() host: HTMLSlMenuElement;
- @State() hasFocus = false;
-
- /** Emitted when the menu gains focus. */
- @Event({ eventName: 'sl-focus' }) slFocus: EventEmitter;
-
- /** Emitted when the menu loses focus. */
- @Event({ eventName: 'sl-blur' }) slBlur: EventEmitter;
-
/** Emitted when a menu item is selected. */
@Event({ eventName: 'sl-select' }) slSelect: EventEmitter<{ item: HTMLSlMenuItemElement }>;
@@ -38,20 +30,6 @@ export class Menu {
this.handleKeyDown = this.handleKeyDown.bind(this);
}
- /** Sets focus on the menu. */
- @Method()
- async setFocus() {
- this.hasFocus = true;
- this.menu.focus();
- }
-
- /** Removes focus from the menu. */
- @Method()
- async removeFocus() {
- this.hasFocus = false;
- this.menu.blur();
- }
-
/**
* Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.
* The key passed will be appended to the internal query and the selection will be updated. After a brief period, the
@@ -150,13 +128,11 @@ export class Menu {
(this.menu = el)}
part="base"
- class={{
- menu: true,
- 'menu--has-focus': this.hasFocus
- }}
+ class="menu"
role="menu"
onClick={this.handleClick}
onKeyDown={this.handleKeyDown}
+ tabIndex={0}
>