mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-12 08:34:08 +02:00
Remove .dropdown-menu[style] reset and adjust .dropdown-menu-* modifiers
- Removes the &[style] selector that was used for resetting Popper styles - Separate Popper-based alignment from static alignment with `data-bs-popover` attribute that separates the --bs-position and custom right/left properties Co-Authored-By: Rohit Sharma <rohit2sharma95@gmail.com>
This commit is contained in:
@@ -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)
|
||||
}
|
||||
}
|
||||
|
@@ -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 = [
|
||||
'<nav class="navbar navbar-expand-md navbar-light bg-light">',
|
||||
' <div class="dropdown">',
|
||||
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>',
|
||||
' <div class="dropdown-menu">',
|
||||
' <a class="dropdown-item" href="#">Secondary link</a>',
|
||||
' </div>',
|
||||
' </div>',
|
||||
'</nav>'
|
||||
].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 = [
|
||||
'<div class="dropdown">',
|
||||
' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static">Dropdown</button>',
|
||||
' <div class="dropdown-menu">',
|
||||
' <a class="dropdown-item" href="#">Secondary link</a>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].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 = [
|
||||
'<div class="dropdown">',
|
||||
|
Reference in New Issue
Block a user