mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-07 22:26:57 +02:00
Code Issues Releases Wiki Activity

Dropdown: Simplify dataKeyApiHandler (#35870)

Browse Source 
* 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
1 changed files with 12 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
js/src/dropdown.js
View File

@@ -48,8 +48,6 @@ const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_DROPUP = 'dropup' const CLASS_NAME_DROPUP = 'dropup'
const CLASS_NAME_DROPEND = 'dropend' const CLASS_NAME_DROPEND = 'dropend'
const CLASS_NAME_DROPSTART = 'dropstart' 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 = '[data-bs-toggle="dropdown"]:not(.disabled):not(:disabled)'
const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}` 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_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end'
const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start' const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start'
const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start' const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start'
const PLACEMENT_TOPCENTER = 'top'
const PLACEMENT_BOTTOMCENTER = 'bottom'
const Default = { const Default = {
offset: [0, 2], offset: [0, 2],
@@ -252,14 +248,6 @@ class Dropdown extends BaseComponent {
return PLACEMENT_LEFT 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 // We need to trim the value because custom properties can also include spaces
const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end' const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end'
@@ -388,38 +376,27 @@ class Dropdown extends BaseComponent {
} }
static dataApiKeydownHandler(event) { static dataApiKeydownHandler(event) {
// If not input/textarea: // If not an UP | DOWN | ESCAPE key => not a dropdown command
// - And not a key in UP | DOWN | ESCAPE => not a dropdown command // If input/textarea && if key is other than 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
const { target, key, delegateTarget } = event const isInput = /input|textarea/i.test(event.target.tagName)
const isInput = /input|textarea/i.test(target.tagName) const isEscapeEvent = event.key === ESCAPE_KEY
const isEscapeEvent = key === ESCAPE_KEY const isUpOrDownEvent = [ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key)
const isUpOrDownEvent = [ARROW_UP_KEY, ARROW_DOWN_KEY].includes(key)
if (!isInput && !(isUpOrDownEvent || isEscapeEvent)) { if (!isUpOrDownEvent && !isEscapeEvent) {
return return
} }
if (isInput && !isEscapeEvent) { 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 return
} }
event.preventDefault() event.preventDefault()
if (!isEscapeEvent) {
event.stopPropagation() 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) const instance = Dropdown.getOrCreateInstance(getToggleButton)
if (isEscapeEvent) { if (isEscapeEvent) {
@@ -428,12 +405,10 @@ class Dropdown extends BaseComponent {
return return
} }
if (isUpOrDownEvent) {
instance.show() instance.show()
instance._selectMenuItem(event) instance._selectMenuItem(event)
} }
} }
}
/** /**
* Data API implementation * Data API implementation