Merge pull request #417 from maykinmedia/fix/801-use-escape-for-closi…

…ng-menus [#801] Fix/close menus with escape button
maykinmedia · Feb 13, 2023 · ab6e71b · ab6e71b
2 parents 9e8c1bd + 2018977
commit ab6e71b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/open_inwoner/js/components/dropdown/index.js b/src/open_inwoner/js/components/dropdown/index.js
@@ -6,6 +6,7 @@ export class Dropdown {
     this.button = node.querySelector('.button')
     this.button.addEventListener('click', this.toggleOpen.bind(this))
     document.addEventListener('click', this.doClosing.bind(this), false)
+    document.addEventListener('keydown', this.doClosing.bind(this), false)
   }
 
   toggleOpen(event) {
@@ -17,7 +18,12 @@ export class Dropdown {
   }
 
   doClosing(event) {
-    this.node.classList.remove('dropdown--open')
+    if (
+      event.type === 'click' ||
+      (event.type === 'keydown' && event.key === 'Escape')
+    ) {
+      this.node.classList.remove('dropdown--open')
+    }
   }
 }
 

diff --git a/src/open_inwoner/scss/components/Dropdown/Dropdown.scss b/src/open_inwoner/scss/components/Dropdown/Dropdown.scss
@@ -11,7 +11,7 @@
     flex-direction: column;
     padding: var(--spacing-medium) 0;
     position: absolute;
-    left: 0%;
+    left: 0;
     border-radius: var(--border-radius);
     background-color: var(--color-white);
     border: 1px solid var(--color-mute);
@@ -37,4 +37,11 @@
     height: var(--font-line-height-body);
     padding: 0;
   }
+
+  @media (max-width: 767px) {
+    .dropdown__content {
+      left: initial;
+      right: 0;
+    }
+  }
 }