mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
Dropdown: Simplify dataKeyApiHandler (#35870)
* Dropdown.js: Remove duplicated check for `Not Shown` instance * Dropdown.js: Rearrange `dataApiKeydownHandler` checks * Dropdown: do some fixup inside `dataApiKeydownHandler` * Update dropdown.js Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
parent
5051bbb82d
commit
bb7664db0a
1 changed files with 12 additions and 37 deletions
|
@ -48,8 +48,6 @@ 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}`
|
||||
|
@ -64,8 +62,6 @@ 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],
|
||||
|
@ -252,14 +248,6 @@ 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'
|
||||
|
||||
|
@ -388,38 +376,27 @@ class Dropdown extends BaseComponent {
|
|||
}
|
||||
|
||||
static dataApiKeydownHandler(event) {
|
||||
// If not input/textarea:
|
||||
// - And not a key in UP | DOWN | ESCAPE => not a dropdown command
|
||||
// If input/textarea && If key is other than ESCAPE
|
||||
// - If key is not UP or DOWN => not a dropdown command
|
||||
// - If trigger inside the menu => not a dropdown command
|
||||
// If not an UP | DOWN | ESCAPE key => not a dropdown command
|
||||
// If input/textarea && if key is other than ESCAPE => not a dropdown command
|
||||
|
||||
const { target, key, delegateTarget } = event
|
||||
const isInput = /input|textarea/i.test(target.tagName)
|
||||
const isEscapeEvent = key === ESCAPE_KEY
|
||||
const isUpOrDownEvent = [ARROW_UP_KEY, ARROW_DOWN_KEY].includes(key)
|
||||
const isInput = /input|textarea/i.test(event.target.tagName)
|
||||
const isEscapeEvent = event.key === ESCAPE_KEY
|
||||
const isUpOrDownEvent = [ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key)
|
||||
|
||||
if (!isInput && !(isUpOrDownEvent || isEscapeEvent)) {
|
||||
if (!isUpOrDownEvent && !isEscapeEvent) {
|
||||
return
|
||||
}
|
||||
|
||||
if (isInput && !isEscapeEvent) {
|
||||
// eslint-disable-next-line unicorn/no-lonely-if
|
||||
if (!isUpOrDownEvent || target.closest(SELECTOR_MENU)) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const isActive = delegateTarget.classList.contains(CLASS_NAME_SHOW)
|
||||
|
||||
if (!isActive && isEscapeEvent) {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
if (!isEscapeEvent) {
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, delegateTarget.parentNode)
|
||||
const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode)
|
||||
const instance = Dropdown.getOrCreateInstance(getToggleButton)
|
||||
|
||||
if (isEscapeEvent) {
|
||||
|
@ -428,11 +405,9 @@ class Dropdown extends BaseComponent {
|
|||
return
|
||||
}
|
||||
|
||||
if (isUpOrDownEvent) {
|
||||
instance.show()
|
||||
instance._selectMenuItem(event)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in a new issue