diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index a35f554799..378668a6d0 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -156,7 +156,9 @@ class Dropdown extends BaseComponent {
}
// Totally disable Popper for Dropdowns in Navbar
- if (!this._inNavbar) {
+ if (this._inNavbar) {
+ Manipulator.setDataAttribute(this._menu, 'popper', 'none')
+ } else {
if (typeof Popper === 'undefined') {
throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)')
}
@@ -176,7 +178,14 @@ class Dropdown extends BaseComponent {
referenceElement = this._config.reference
}
- this._popper = Popper.createPopper(referenceElement, this._menu, this._getPopperConfig())
+ const popperConfig = this._getPopperConfig()
+ const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false)
+
+ if (isDisplayStatic) {
+ Manipulator.setDataAttribute(this._menu, 'popper', 'static')
+ }
+
+ this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
}
// If this is a touch-enabled device we add extra
@@ -218,6 +227,7 @@ class Dropdown extends BaseComponent {
this._menu.classList.toggle(CLASS_NAME_SHOW)
this._element.classList.toggle(CLASS_NAME_SHOW)
+ Manipulator.removeDataAttribute(this._menu, 'popper')
EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget)
}
@@ -421,6 +431,7 @@ class Dropdown extends BaseComponent {
dropdownMenu.classList.remove(CLASS_NAME_SHOW)
toggles[i].classList.remove(CLASS_NAME_SHOW)
+ Manipulator.removeDataAttribute(dropdownMenu, 'popper')
EventHandler.trigger(toggles[i], EVENT_HIDDEN, relatedTarget)
}
}
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js
index 47775678f8..01d599ceb6 100644
--- a/js/tests/unit/dropdown.spec.js
+++ b/js/tests/unit/dropdown.spec.js
@@ -1006,13 +1006,44 @@ describe('Dropdown', () => {
const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
+ const dropdown = new Dropdown(btnDropdown)
btnDropdown.addEventListener('shown.bs.dropdown', () => {
+ expect(dropdown._popper).toBeNull()
expect(dropdownMenu.getAttribute('style')).toEqual(null, 'no inline style applied by Popper')
done()
})
- btnDropdown.click()
+ dropdown.show()
+ })
+
+ it('should manage bs attribute `data-bs-popper`="none" when dropdown is in navbar', done => {
+ fixtureEl.innerHTML = [
+ ''
+ ].join('')
+
+ const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
+ const dropdown = new Dropdown(btnDropdown)
+
+ btnDropdown.addEventListener('shown.bs.dropdown', () => {
+ expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('none')
+ dropdown.hide()
+ })
+
+ btnDropdown.addEventListener('hidden.bs.dropdown', () => {
+ expect(dropdownMenu.getAttribute('data-bs-popper')).toBeNull()
+ done()
+ })
+
+ dropdown.show()
})
it('should not use Popper if display set to static', done => {
@@ -1037,6 +1068,33 @@ describe('Dropdown', () => {
btnDropdown.click()
})
+ it('should manage bs attribute `data-bs-popper`="static" when display set to static', done => {
+ fixtureEl.innerHTML = [
+ '',
+ ' ',
+ ' ',
+ '
'
+ ].join('')
+
+ const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
+ const dropdown = new Dropdown(btnDropdown)
+
+ btnDropdown.addEventListener('shown.bs.dropdown', () => {
+ expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('static')
+ dropdown.hide()
+ })
+
+ btnDropdown.addEventListener('hidden.bs.dropdown', () => {
+ expect(dropdownMenu.getAttribute('data-bs-popper')).toBeNull()
+ done()
+ })
+
+ dropdown.show()
+ })
+
it('should remove "show" class if tabbing outside of menu', done => {
fixtureEl.innerHTML = [
'',
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index f659ddc77e..9a4f3a04d5 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -32,11 +32,6 @@
border: $dropdown-border-width solid $dropdown-border-color;
@include border-radius($dropdown-border-radius);
@include box-shadow($dropdown-box-shadow);
-
- // Reset positioning when positioned with Popper
- &[style] {
- right: auto#{"/* rtl:ignore */"} !important; // stylelint-disable-line declaration-no-important
- }
}
// scss-docs-start responsive-breakpoints
@@ -49,14 +44,20 @@
.dropdown-menu#{$infix}-start {
--bs-position: start;
- right: auto #{"/* rtl:ignore */"};
- left: 0 #{"/* rtl:ignore */"};
+
+ &[data-bs-popper] {
+ right: auto #{"/* rtl:ignore */"};
+ left: 0 #{"/* rtl:ignore */"};
+ }
}
.dropdown-menu#{$infix}-end {
--bs-position: end;
- right: 0 #{"/* rtl:ignore */"};
- left: auto #{"/* rtl:ignore */"};
+
+ &[data-bs-popper] {
+ right: 0 #{"/* rtl:ignore */"};
+ left: auto #{"/* rtl:ignore */"};
+ }
}
}
}
diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md
index 199c7a024f..d5efd3adbc 100644
--- a/site/content/docs/5.0/components/dropdowns.md
+++ b/site/content/docs/5.0/components/dropdowns.md
@@ -30,10 +30,10 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
{{< example >}}
-