diff --git a/docs/getting-started/changelog.md b/docs/getting-started/changelog.md index ea139007..b0c15f7f 100644 --- a/docs/getting-started/changelog.md +++ b/docs/getting-started/changelog.md @@ -6,6 +6,10 @@ Components with the Experimental badge _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛 +## Next + +- Removed `sl-blur` and `sl-focus` events from `sl-menu` since menus can't have focus since 2.0.0-beta.22 + ## 2.0.0-beta.24 - Added `sl-format-date` component diff --git a/src/components.d.ts b/src/components.d.ts index f3bcd658..87a1af82 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -774,14 +774,6 @@ export namespace Components { "value": string; } interface SlMenu { - /** - * Removes focus from the menu. - */ - "removeFocus": () => Promise; - /** - * Sets focus on the menu. - */ - "setFocus": () => Promise; /** * 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 internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for enabling type-to-select when the menu doesn't have focus. */ @@ -2468,14 +2460,6 @@ declare namespace LocalJSX { "value"?: string; } interface SlMenu { - /** - * Emitted when the menu loses focus. - */ - "onSl-blur"?: (event: CustomEvent) => void; - /** - * Emitted when the menu gains focus. - */ - "onSl-focus"?: (event: CustomEvent) => 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} >