Add close on tab flag to dropdown controller #562

src/components/Header.ts

@@ -139,6 +139,7 @@ export class Header extends LitElement {
       this.serviceNavElement?.shadowRoot?.querySelector("bkd-hamburger") ??
       null,
     () => this.mobileNavElement?.shadowRoot ?? null,
+    false,
   );
 
   private handleLogoClick(event: MouseEvent) {

src/components/Header/NavGroupToggle.ts

@@ -64,6 +64,7 @@ export class NavGroupToggle extends LitElement {
       this.menuElement?.shadowRoot?.querySelector<HTMLElement>(
         'ul[role="menu"]',
       ) ?? null,
+    true,
     {
       queryItems: () =>
         this.menuElement?.shadowRoot?.querySelectorAll<HTMLElement>(

src/components/Header/NotificationsToggle.ts

@@ -87,6 +87,16 @@ export class NotificationsToggle extends LitElement {
     this,
     () => this.toggleElement ?? null,
     () => this.dropdownElement?.shadowRoot ?? null,
+    true,
+    {
+      queryItems: () =>
+        this.dropdownElement?.shadowRoot?.querySelectorAll<HTMLElement>(
+          "button",
+        ) ?? null,
+      queryFocused: () =>
+        (this.dropdownElement?.shadowRoot?.activeElement ??
+          null) as HTMLElement | null,
+    },
   );
 
   private handleDeleteAllNotifications() {

src/components/Header/SubstitutionsToggle.ts

@@ -101,6 +101,7 @@ export class SubstitutionsToggle extends LitElement {
     this,
     () => this.toggleElement ?? null,
     () => this.menuElement?.shadowRoot ?? null,
+    this.isLargeScreen(),
     {
       queryItems: () =>
         this.menuElement?.shadowRoot?.querySelectorAll<HTMLElement>(

src/components/Header/UserSettings.ts

@@ -90,6 +90,7 @@ export class UserSettings extends LitElement {
     this,
     () => this.toggleElement ?? null,
     () => this.menuElement ?? null,
+    true,
     {
       queryItems: () =>
         this.shadowRoot?.querySelectorAll<HTMLElement>("a[role='menuitem']") ??

src/controllers/dropdown.ts

@@ -27,6 +27,7 @@ export class DropdownController implements ReactiveController {
     private host: ReactiveControllerHost & HTMLElement,
     private queryToggleElement: () => HTMLElement | ShadowRoot | null,
     private queryMenuElement: () => HTMLElement | ShadowRoot | null,
+    private closeOnTab: boolean,
     private itemQueries?: {
       /**
        * Returns all dropdown items
@@ -78,7 +79,9 @@ export class DropdownController implements ReactiveController {
     // Make sure to register events after rendering, for elements to
     // be present
     setTimeout(() => {
-      this.menuElement?.addEventListener("focusout", this.closeOnBlur, true);
+      if (!this.closeOnTab) {
+        this.menuElement?.addEventListener("focusout", this.closeOnBlur, true);
+      }
 
       // To detect clicks into iframe, add event listener to iframe
       // document
@@ -94,7 +97,9 @@ export class DropdownController implements ReactiveController {
   }
 
   private removeListeners(): void {
-    this.menuElement?.removeEventListener("focusout", this.closeOnBlur, true);
+    if (!this.closeOnTab) {
+      this.menuElement?.removeEventListener("focusout", this.closeOnBlur, true);
+    }
     document.removeEventListener("click", this.handleDocumentClick, true);
     this.iframeDocument?.removeEventListener(
       "click",
@@ -141,6 +146,10 @@ export class DropdownController implements ReactiveController {
 
   private handleKeydown = (event: KeyboardEvent) => {
     switch (event.key) {
+      case "Tab": {
+        if (this.closeOnTab) this.close();
+        break;
+      }
       case "Escape": {
         this.close();
         break;