feat(menu): auto-focus menu when dropdown opens

AlaskaAirlines · Jan 27, 2022 · d48c5ee · d48c5ee
1 parent 65e753c
commit d48c5ee
Showing 1 changed file with 14 additions and 0 deletions.
diff --git a/src/auro-dropdownmenu.js b/src/auro-dropdownmenu.js
@@ -74,6 +74,20 @@ class AuroDropdownmenu extends LitElement {
   }
 
   firstUpdated() {
+    this.addEventListener('click', () => {
+      const menuItems = this.querySelectorAll('auro-menuoption');
+
+      let focusIndex = 0;
+
+      for (let optionsIndex = 0; optionsIndex < menuItems.length; optionsIndex += 1) {
+        if (menuItems[optionsIndex].hasAttribute('selected')) {
+          focusIndex = optionsIndex;
+        }
+      }
+
+      menuItems[focusIndex].focus();
+    });
+
     this.addEventListener('optionSelected', (evt) => {
       try {
         this.shadowRoot.querySelector('auro-dropdown').hide();