Remove unused menu methods

docs/getting-started/changelog.md

@@ -6,6 +6,10 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> 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

src/components.d.ts

@@ -774,14 +774,6 @@ export namespace Components {
         "value": string;
     }
     interface SlMenu {
-        /**
-          * Removes focus from the menu.
-         */
-        "removeFocus": () => Promise<void>;
-        /**
-          * Sets focus on the menu.
-         */
-        "setFocus": () => Promise<void>;
         /**
           * 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<any>) => void;
-        /**
-          * Emitted when the menu gains focus.
-         */
-        "onSl-focus"?: (event: CustomEvent<any>) => void;
         /**
           * Emitted when a menu item is selected.
          */

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;
     }

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 {
       <div
         ref={el => (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}
       >
         <slot />
       </div>