Merge branch 'dso-toolkit#2571-dropdown-menu-endless-loop-fix'

# Conflicts: # CHANGELOG.md
tfrijsewijk · Mar 6, 2024 · 6c7f8d5 · 6c7f8d5
2 parents 4409355 + 741a307
commit 6c7f8d5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
 
 ## Next
 
+## 🦷 62.11.1 - 06-03-2024
+
+### Fixed
+* Dropdown Menu: Oneindige loop ([#2571](https://github.com/dso-toolkit/dso-toolkit/issues/2571))
+
 ## 🦜 62.14.0 - 04-03-2024
 
 ### Added

diff --git a/packages/core/src/components/dropdown-menu/dropdown-menu.tsx b/packages/core/src/components/dropdown-menu/dropdown-menu.tsx
@@ -228,8 +228,11 @@ export class DropdownMenu {
     this.setStrategy();
     if (this.open) {
       this.popper?.update();
-      this.createTrap();
-    } else {
+
+      if (!this.trap) {
+        this.createTrap();
+      }
+    } else if (this.trap) {
       this.trap?.deactivate();
 
       delete this.trap;
@@ -263,6 +266,12 @@ export class DropdownMenu {
     this.popper?.destroy();
   }
 
+  private focusOutListener = (event: FocusEvent) => {
+    if (!this.tabbables.includes(event.relatedTarget as FocusableElement)) {
+      this.open = false;
+    }
+  };
+
   private keyDownListener = (event: KeyboardEvent) => {
     if (event.defaultPrevented) {
       return;
@@ -316,7 +325,7 @@ export class DropdownMenu {
 
   render() {
     return (
-      <Host tabindex={this.open ? "-1" : undefined}>
+      <Host onFocusout={this.focusOutListener} tabindex={this.open ? "-1" : undefined}>
         <slot name="toggle" />
         <div hidden={!this.open}>
           <slot />