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:
GeoSot 2022-03-01 15:53:07 +02:00 committed by GitHub
parent 5051bbb82d
commit bb7664db0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 37 deletions

View File

@ -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()
event.stopPropagation()
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,10 +405,8 @@ class Dropdown extends BaseComponent {
return
}
if (isUpOrDownEvent) {
instance.show()
instance._selectMenuItem(event)
}
instance.show()
instance._selectMenuItem(event)
}
}