1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-23 00:39:54 +00:00

Dropdown: Merge display='static' & isNavbar functionality activating static popper with no styles attached

This commit is contained in:
GeoSot 2021-10-10 15:09:57 +03:00 committed by XhmikosR
parent 137b324930
commit fb5921dec4
2 changed files with 10 additions and 19 deletions

View File

@ -133,12 +133,8 @@ class Dropdown extends BaseComponent {
} }
const parent = getElementFromSelector(this._element) || this._element.parentNode const parent = getElementFromSelector(this._element) || this._element.parentNode
// Totally disable Popper for Dropdowns in Navbar
if (this._inNavbar) {
Manipulator.setDataAttribute(this._menu, 'popper', 'none')
} else {
this._createPopper(parent) this._createPopper(parent)
}
// If this is a touch-enabled device we add extra // If this is a touch-enabled device we add extra
// empty mouseover listeners to the body's immediate children; // empty mouseover listeners to the body's immediate children;
@ -246,13 +242,7 @@ class Dropdown extends BaseComponent {
} }
const popperConfig = this._getPopperConfig() const popperConfig = this._getPopperConfig()
const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false)
this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig) this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
if (isDisplayStatic) {
Manipulator.setDataAttribute(this._menu, 'popper', 'static')
}
} }
_isShown(element = this._element) { _isShown(element = this._element) {
@ -319,8 +309,9 @@ class Dropdown extends BaseComponent {
}] }]
} }
// Disable Popper if we have a static display // Disable Popper if we have a static display or Dropdown is in Navbar
if (this._config.display === 'static') { if (this._inNavbar || this._config.display === 'static') {
Manipulator.setDataAttribute(this._menu, 'popper', 'static') // todo:v6 remove
defaultBsPopperConfig.modifiers = [{ defaultBsPopperConfig.modifiers = [{
name: 'applyStyles', name: 'applyStyles',
enabled: false enabled: false

View File

@ -1054,7 +1054,7 @@ describe('Dropdown', () => {
btnDropdown.click() btnDropdown.click()
}) })
it('should not use Popper in navbar', done => { it('should not use "static" Popper in navbar', done => {
fixtureEl.innerHTML = [ fixtureEl.innerHTML = [
'<nav class="navbar navbar-expand-md navbar-light bg-light">', '<nav class="navbar navbar-expand-md navbar-light bg-light">',
' <div class="dropdown">', ' <div class="dropdown">',
@ -1071,8 +1071,8 @@ describe('Dropdown', () => {
const dropdown = new Dropdown(btnDropdown) const dropdown = new Dropdown(btnDropdown)
btnDropdown.addEventListener('shown.bs.dropdown', () => { btnDropdown.addEventListener('shown.bs.dropdown', () => {
expect(dropdown._popper).toBeNull() expect(dropdown._popper).not.toBeNull()
expect(dropdownMenu.getAttribute('style')).toBeNull() expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('static')
done() done()
}) })
@ -1120,7 +1120,7 @@ describe('Dropdown', () => {
dropdown.show() dropdown.show()
}) })
it('should manage bs attribute `data-bs-popper`="none" when dropdown is in navbar', done => { it('should manage bs attribute `data-bs-popper`="static" when dropdown is in navbar', done => {
fixtureEl.innerHTML = [ fixtureEl.innerHTML = [
'<nav class="navbar navbar-expand-md navbar-light bg-light">', '<nav class="navbar navbar-expand-md navbar-light bg-light">',
' <div class="dropdown">', ' <div class="dropdown">',
@ -1137,7 +1137,7 @@ describe('Dropdown', () => {
const dropdown = new Dropdown(btnDropdown) const dropdown = new Dropdown(btnDropdown)
btnDropdown.addEventListener('shown.bs.dropdown', () => { btnDropdown.addEventListener('shown.bs.dropdown', () => {
expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('none') expect(dropdownMenu.getAttribute('data-bs-popper')).toEqual('static')
dropdown.hide() dropdown.hide()
}) })