From 6c40476af9b2d54fc8029294be1d9e4e8a246482 Mon Sep 17 00:00:00 2001
From: "louismaxime.piton" <louismaxime.piton@orange.com>
Date: Tue, 8 Mar 2022 12:34:21 +0100
Subject: [PATCH] Fix dropdowns

---
 js/src/dropdown.js  | 20 ++++++++++++++++++--
 scss/_dropdown.scss |  2 +-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index c93739b523..65b3aa372a 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -48,6 +48,8 @@ const CLASS_NAME_SHOW = 'show'
 const CLASS_NAME_DROPUP = 'dropup'
 const CLASS_NAME_DROPEND = 'dropend'
 const CLASS_NAME_DROPSTART = 'dropstart'
+const CLASS_NAME_DROPUP_CENTER = 'dropup-center'
+const CLASS_NAME_DROPDOWN_CENTER = 'dropdown-center'
 
 const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)'
 const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`
@@ -62,6 +64,8 @@ const PLACEMENT_BOTTOM = isRTL() ? 'bottom-end' : 'bottom-start'
 const PLACEMENT_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end'
 const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start'
 const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start'
+const PLACEMENT_TOPCENTER = 'top'
+const PLACEMENT_BOTTOMCENTER = 'bottom'
 
 const Default = {
   offset: [0, 2],
@@ -248,6 +252,14 @@ class Dropdown extends BaseComponent {
       return PLACEMENT_LEFT
     }
 
+    if (parentDropdown.classList.contains(CLASS_NAME_DROPUP_CENTER)) {
+      return PLACEMENT_TOPCENTER
+    }
+
+    if (parentDropdown.classList.contains(CLASS_NAME_DROPDOWN_CENTER)) {
+      return PLACEMENT_BOTTOMCENTER
+    }
+
     // We need to trim the value because custom properties can also include spaces
     const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end'
 
@@ -400,8 +412,12 @@ class Dropdown extends BaseComponent {
     const instance = Dropdown.getOrCreateInstance(getToggleButton)
 
     if (isEscapeEvent) {
-      instance.hide()
-      getToggleButton.focus()
+      if (getToggleButton.classList.contains(CLASS_NAME_SHOW)) {
+        instance.hide()
+        getToggleButton.focus()
+        event.stopPropagation()
+      }
+
       return
     }
 
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 6f8acc1aa4..e04f91cb0f 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -51,7 +51,7 @@
   min-width: var(--#{$variable-prefix}dropdown-min-width);
   padding: var(--#{$variable-prefix}dropdown-padding-y) var(--#{$variable-prefix}dropdown-padding-x);
   margin: 0; // Override default margin of ul
-  @include font-size(var(#{$variable-prefix}dropdown-font-size));
+  @include font-size(var(--#{$variable-prefix}dropdown-font-size));
   color: var(--#{$variable-prefix}dropdown-color);
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   list-style: none;