Play with focus.

Author: Templarian

src/pg/menu/menu.ts

@@ -35,4 +35,9 @@ export default class PgMenu extends HTMLElement {
     });
   }
 
+  focus() {
+    const first = this.$items.firstChild as HTMLElement;
+    first?.focus();
+  }
+
 }

src/pg/menuItem/menuItem.ts

@@ -30,4 +30,8 @@ export default class PgMenuItem extends HTMLElement {
     })
   }
 
+  focus() {
+    this.$label.focus();
+  }
+
 }

src/pg/overlayMenu/overlayMenu.ts

@@ -16,7 +16,6 @@ export default class PgOverlayMenu extends PgOverlay {
 
   @Prop() source: HTMLElement | null = null;
   @Prop() items = [];
-  #uniqueId = 0;
 
   render(changes) {
     if (changes.items) {
@@ -34,10 +33,10 @@ export default class PgOverlayMenu extends PgOverlay {
       });
     }
     this.$overlay.addEventListener('toggle', this.#toggle.bind(this));
+    this.$menu.focus();
   }
 
   #toggle(e: ToggleEvent) {
-    console.log(e.newState);
     if (e.newState === 'closed') {
       this.close();
     }