From 137b3249304b9ffeb76c72b7094ae7f170993016 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sun, 10 Oct 2021 14:59:12 +0300 Subject: Dropdown: Remove static method used once --- js/src/dropdown.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 6129707e2..06f69af7b 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -132,7 +132,7 @@ class Dropdown extends BaseComponent { return } - const parent = Dropdown.getParentFromElement(this._element) + const parent = getElementFromSelector(this._element) || this._element.parentNode // Totally disable Popper for Dropdowns in Navbar if (this._inNavbar) { Manipulator.setDataAttribute(this._menu, 'popper', 'none') @@ -408,10 +408,6 @@ class Dropdown extends BaseComponent { } } - static getParentFromElement(element) { - return getElementFromSelector(element) || element.parentNode - } - static dataApiKeydownHandler(event) { // If not input/textarea: // - And not a key in REGEXP_KEYDOWN => not a dropdown command -- cgit v1.2.3 From fb5921dec49da37e9bab745d7319037e89e2f31e Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sun, 10 Oct 2021 15:09:57 +0300 Subject: Dropdown: Merge `display='static'` & `isNavbar` functionality activating static popper with no styles attached --- js/src/dropdown.js | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 06f69af7b..d5c42b012 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -133,12 +133,8 @@ class Dropdown extends BaseComponent { } 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 // empty mouseover listeners to the body's immediate children; @@ -246,13 +242,7 @@ class Dropdown extends BaseComponent { } const popperConfig = this._getPopperConfig() - const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false) - this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig) - - if (isDisplayStatic) { - Manipulator.setDataAttribute(this._menu, 'popper', 'static') - } } _isShown(element = this._element) { @@ -319,8 +309,9 @@ class Dropdown extends BaseComponent { }] } - // Disable Popper if we have a static display - if (this._config.display === 'static') { + // Disable Popper if we have a static display or Dropdown is in Navbar + if (this._inNavbar || this._config.display === 'static') { + Manipulator.setDataAttribute(this._menu, 'popper', 'static') // todo:v6 remove defaultBsPopperConfig.modifiers = [{ name: 'applyStyles', enabled: false -- cgit v1.2.3 From 2d32802f53660b0146e0f78d1c8cd1fb58c0233e Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sun, 10 Oct 2021 15:24:07 +0300 Subject: Dropdown: Change constant to the way we use it --- js/src/dropdown.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index d5c42b012..2376e74cd 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -53,10 +53,10 @@ const CLASS_NAME_SHOW = 'show' const CLASS_NAME_DROPUP = 'dropup' const CLASS_NAME_DROPEND = 'dropend' const CLASS_NAME_DROPSTART = 'dropstart' -const CLASS_NAME_NAVBAR = 'navbar' const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]' const SELECTOR_MENU = '.dropdown-menu' +const SELECTOR_NAVBAR = '.navbar' const SELECTOR_NAVBAR_NAV = '.navbar-nav' const SELECTOR_VISIBLE_ITEMS = '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)' @@ -275,7 +275,7 @@ class Dropdown extends BaseComponent { } _detectNavbar() { - return this._element.closest(`.${CLASS_NAME_NAVBAR}`) !== null + return this._element.closest(SELECTOR_NAVBAR) !== null } _getOffset() { -- cgit v1.2.3 From bff95d55af1074d67738c5f83d69f7b8cff5a22a Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sun, 10 Oct 2021 15:39:47 +0300 Subject: Dropdown: Remove redundant check since the `show` method already does it --- js/src/dropdown.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 2376e74cd..6c613efc6 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -437,10 +437,7 @@ class Dropdown extends BaseComponent { } if (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY) { - if (!isActive) { - instance.show() - } - + instance.show() instance._selectMenuItem(event) return } -- cgit v1.2.3 From a14a552d83a8f5452f2ef53a6a85a91c8aafb5f7 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sun, 10 Oct 2021 16:21:34 +0300 Subject: Dropdown: Deduplicate complex check --- js/src/dropdown.js | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 6c613efc6..90bc582b9 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -39,8 +39,6 @@ const ARROW_UP_KEY = 'ArrowUp' const ARROW_DOWN_KEY = 'ArrowDown' const RIGHT_MOUSE_BUTTON = 2 // MouseEvent.button value for the secondary button, usually the right button -const REGEXP_KEYDOWN = new RegExp(`${ARROW_UP_KEY}|${ARROW_DOWN_KEY}|${ESCAPE_KEY}`) - const EVENT_HIDE = `hide${EVENT_KEY}` const EVENT_HIDDEN = `hidden${EVENT_KEY}` const EVENT_SHOW = `show${EVENT_KEY}` @@ -407,14 +405,23 @@ class Dropdown extends BaseComponent { // - 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 (/input|textarea/i.test(event.target.tagName) ? - event.key === SPACE_KEY || (event.key !== ESCAPE_KEY && - ((event.key !== ARROW_DOWN_KEY && event.key !== ARROW_UP_KEY) || - event.target.closest(SELECTOR_MENU))) : - !REGEXP_KEYDOWN.test(event.key)) { + + const isInput = /input|textarea/i.test(event.target.tagName) + const eventKey = event.key + if (!isInput && ![ARROW_UP_KEY, ARROW_DOWN_KEY, ESCAPE_KEY].includes(eventKey)) { return } + if (isInput) { + if (eventKey === SPACE_KEY) { + return + } + + if (eventKey !== ESCAPE_KEY && (![ARROW_UP_KEY, ARROW_DOWN_KEY].includes(eventKey) || event.target.closest(SELECTOR_MENU))) { + return + } + } + const isActive = this.classList.contains(CLASS_NAME_SHOW) if (!isActive && event.key === ESCAPE_KEY) { -- cgit v1.2.3 From 0686fa00f04f5479753a32890dcae25b6c134e71 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sun, 10 Oct 2021 16:31:39 +0300 Subject: Dropdown: Remove redundant `Space` check --- js/src/dropdown.js | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 90bc582b9..c769ed504 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -33,7 +33,6 @@ const EVENT_KEY = `.${DATA_KEY}` const DATA_API_KEY = '.data-api' const ESCAPE_KEY = 'Escape' -const SPACE_KEY = 'Space' const TAB_KEY = 'Tab' const ARROW_UP_KEY = 'ArrowUp' const ARROW_DOWN_KEY = 'ArrowDown' @@ -399,11 +398,10 @@ class Dropdown extends BaseComponent { static dataApiKeydownHandler(event) { // If not input/textarea: - // - And not a key in REGEXP_KEYDOWN => not a dropdown command + // - And not a key in UP | DOWN | ESCAPE => not a dropdown command // If input/textarea: - // - If space key => not a dropdown command - // - If key is other than escape - // - If key is not up or down => not a dropdown command + // - 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 isInput = /input|textarea/i.test(event.target.tagName) @@ -413,10 +411,7 @@ class Dropdown extends BaseComponent { } if (isInput) { - if (eventKey === SPACE_KEY) { - return - } - + // eslint-disable-next-line unicorn/no-lonely-if if (eventKey !== ESCAPE_KEY && (![ARROW_UP_KEY, ARROW_DOWN_KEY].includes(eventKey) || event.target.closest(SELECTOR_MENU))) { return } @@ -446,11 +441,6 @@ class Dropdown extends BaseComponent { if (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY) { instance.show() instance._selectMenuItem(event) - return - } - - if (!isActive || event.key === SPACE_KEY) { - Dropdown.clearMenus() } } } -- cgit v1.2.3 From 21e5618ba7007aa11b8a7751f1bbc1a9465dbab1 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sun, 10 Oct 2021 16:39:47 +0300 Subject: Dropdown: rename vars --- js/src/dropdown.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index c769ed504..d5dfe2e20 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -405,21 +405,23 @@ class Dropdown extends BaseComponent { // - If trigger inside the menu => not a dropdown command const isInput = /input|textarea/i.test(event.target.tagName) - const eventKey = event.key - if (!isInput && ![ARROW_UP_KEY, ARROW_DOWN_KEY, ESCAPE_KEY].includes(eventKey)) { + const isEscapeEvent = event.key === ESCAPE_KEY + const isUpOrDownEvent = [ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key) + + if (!isInput && !(isUpOrDownEvent || isEscapeEvent)) { return } if (isInput) { // eslint-disable-next-line unicorn/no-lonely-if - if (eventKey !== ESCAPE_KEY && (![ARROW_UP_KEY, ARROW_DOWN_KEY].includes(eventKey) || event.target.closest(SELECTOR_MENU))) { + if (!isEscapeEvent && (!isUpOrDownEvent || event.target.closest(SELECTOR_MENU))) { return } } const isActive = this.classList.contains(CLASS_NAME_SHOW) - if (!isActive && event.key === ESCAPE_KEY) { + if (!isActive && isEscapeEvent) { return } @@ -433,12 +435,12 @@ class Dropdown extends BaseComponent { const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] const instance = Dropdown.getOrCreateInstance(getToggleButton) - if (event.key === ESCAPE_KEY) { + if (isEscapeEvent) { instance.hide() return } - if (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY) { + if (isUpOrDownEvent) { instance.show() instance._selectMenuItem(event) } -- cgit v1.2.3 From f71640f04844f921613efee90b4868871f96f701 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sun, 10 Oct 2021 16:47:02 +0300 Subject: Dropdown: Clean more --- js/src/dropdown.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index d5dfe2e20..510fcf1a4 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -399,8 +399,7 @@ 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 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 @@ -412,9 +411,9 @@ class Dropdown extends BaseComponent { return } - if (isInput) { + if (isInput && !isEscapeEvent) { // eslint-disable-next-line unicorn/no-lonely-if - if (!isEscapeEvent && (!isUpOrDownEvent || event.target.closest(SELECTOR_MENU))) { + if (!isUpOrDownEvent || event.target.closest(SELECTOR_MENU)) { return } } -- cgit v1.2.3 From dd07c1ff9ee7102f607fbc8b62222ba51a57e81a Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sun, 10 Oct 2021 17:56:34 +0300 Subject: Dropdown: clearMenus is always an event callback --- js/src/dropdown.js | 34 ++++++++++++++++------------------ 1 file changed, 16 insertions(+), 18 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 510fcf1a4..6fa3ea37a 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -351,7 +351,7 @@ class Dropdown extends BaseComponent { } static clearMenus(event) { - if (event && (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY))) { + if (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY)) { return } @@ -371,25 +371,23 @@ class Dropdown extends BaseComponent { relatedTarget: context._element } - if (event) { - const composedPath = event.composedPath() - const isMenuTarget = composedPath.includes(context._menu) - if ( - composedPath.includes(context._element) || - (context._config.autoClose === 'inside' && !isMenuTarget) || - (context._config.autoClose === 'outside' && isMenuTarget) - ) { - continue - } + const composedPath = event.composedPath() + const isMenuTarget = composedPath.includes(context._menu) + if ( + composedPath.includes(context._element) || + (context._config.autoClose === 'inside' && !isMenuTarget) || + (context._config.autoClose === 'outside' && isMenuTarget) + ) { + continue + } - // Tab navigation through the dropdown menu or events from contained inputs shouldn't close the menu - if (context._menu.contains(event.target) && ((event.type === 'keyup' && event.key === TAB_KEY) || /input|select|option|textarea|form/i.test(event.target.tagName))) { - continue - } + // Tab navigation through the dropdown menu or events from contained inputs shouldn't close the menu + if (context._menu.contains(event.target) && ((event.type === 'keyup' && event.key === TAB_KEY) || /input|select|option|textarea|form/i.test(event.target.tagName))) { + continue + } - if (event.type === 'click') { - relatedTarget.clickEvent = event - } + if (event.type === 'click') { + relatedTarget.clickEvent = event } context._completeHide(relatedTarget) -- cgit v1.2.3 From c376cb07630f49ae2bbb464925afb3a2dbc5565e Mon Sep 17 00:00:00 2001 From: GeoSot Date: Thu, 9 Dec 2021 15:34:17 +0200 Subject: Dropdown: fix toggle focus after dropdown is hidden using the `ESC` button (#35500) --- js/src/dropdown.js | 1 + 1 file changed, 1 insertion(+) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 6fa3ea37a..c4e7baf29 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -434,6 +434,7 @@ class Dropdown extends BaseComponent { if (isEscapeEvent) { instance.hide() + getToggleButton.focus() return } -- cgit v1.2.3 From 886b940796b3595a03b44230ca8b78197c5ee1c5 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Fri, 10 Dec 2021 18:18:18 +0200 Subject: Extract Component config functionality to a separate class (#33872) Co-authored-by: XhmikosR --- js/src/dropdown.js | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index c4e7baf29..674150e01 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -15,8 +15,7 @@ import { isElement, isRTL, isVisible, - noop, - typeCheckConfig + noop } from './util/index' import EventHandler from './dom/event-handler' import Manipulator from './dom/manipulator' @@ -88,10 +87,9 @@ const DefaultType = { class Dropdown extends BaseComponent { constructor(element, config) { - super(element) + super(element, config) this._popper = null - this._config = this._getConfig(config) this._menu = this._getMenuElement() this._inNavbar = this._detectNavbar() } @@ -205,13 +203,7 @@ class Dropdown extends BaseComponent { } _getConfig(config) { - config = { - ...this.constructor.Default, - ...Manipulator.getDataAttributes(this._element), - ...config - } - - typeCheckConfig(NAME, config, this.constructor.DefaultType) + config = super._getConfig(config) if (typeof config.reference === 'object' && !isElement(config.reference) && typeof config.reference.getBoundingClientRect !== 'function' -- cgit v1.2.3 From 62d86c07f81dfae632742dbf62633e767bac8edd Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Fri, 29 Oct 2021 10:38:35 +0300 Subject: Rename variables --- js/src/dropdown.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 674150e01..9baa8d3a1 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -136,8 +136,8 @@ class Dropdown extends BaseComponent { // only needed because of broken event delegation on iOS // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html if ('ontouchstart' in document.documentElement && !parent.closest(SELECTOR_NAVBAR_NAV)) { - for (const elem of [].concat(...document.body.children)) { - EventHandler.on(elem, 'mouseover', noop) + for (const element of [].concat(...document.body.children)) { + EventHandler.on(element, 'mouseover', noop) } } @@ -186,8 +186,8 @@ class Dropdown extends BaseComponent { // If this is a touch-enabled device we remove the extra // empty mouseover listeners we added for iOS support if ('ontouchstart' in document.documentElement) { - for (const elem of [].concat(...document.body.children)) { - EventHandler.off(elem, 'mouseover', noop) + for (const element of [].concat(...document.body.children)) { + EventHandler.off(element, 'mouseover', noop) } } @@ -271,7 +271,7 @@ class Dropdown extends BaseComponent { const { offset } = this._config if (typeof offset === 'string') { - return offset.split(',').map(val => Number.parseInt(val, 10)) + return offset.split(',').map(value => Number.parseInt(value, 10)) } if (typeof offset === 'function') { @@ -314,7 +314,7 @@ class Dropdown extends BaseComponent { } _selectMenuItem({ key, target }) { - const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(el => isVisible(el)) + const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(element => isVisible(element)) if (!items.length) { return -- cgit v1.2.3 From 7d3bc44bb0257baff2728ed0ec97c81cb636bcf5 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 9 Nov 2021 15:43:02 +0200 Subject: dropdown: Move constant --- js/src/dropdown.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 9baa8d3a1..7f3b92655 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -359,10 +359,6 @@ class Dropdown extends BaseComponent { continue } - const relatedTarget = { - relatedTarget: context._element - } - const composedPath = event.composedPath() const isMenuTarget = composedPath.includes(context._menu) if ( @@ -378,6 +374,8 @@ class Dropdown extends BaseComponent { continue } + const relatedTarget = { relatedTarget: context._element } + if (event.type === 'click') { relatedTarget.clickEvent = event } -- cgit v1.2.3 From 5f1c542d677add524c94054ba8583269d81d87d0 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Mon, 13 Dec 2021 02:10:26 +0200 Subject: Dropdown: get dropdown's parent in one place --- js/src/dropdown.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 7f3b92655..efc3f2be3 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -90,7 +90,8 @@ class Dropdown extends BaseComponent { super(element, config) this._popper = null - this._menu = this._getMenuElement() + this._parent = getElementFromSelector(this._element) || this._element.parentNode // dropdown wrapper + this._menu = SelectorEngine.findOne(SELECTOR_MENU, this._parent) this._inNavbar = this._detectNavbar() } @@ -127,15 +128,13 @@ class Dropdown extends BaseComponent { return } - const parent = getElementFromSelector(this._element) || this._element.parentNode - - this._createPopper(parent) + this._createPopper() // If this is a touch-enabled device we add extra // empty mouseover listeners to the body's immediate children; // only needed because of broken event delegation on iOS // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html - if ('ontouchstart' in document.documentElement && !parent.closest(SELECTOR_NAVBAR_NAV)) { + if ('ontouchstart' in document.documentElement && !this._parent.closest(SELECTOR_NAVBAR_NAV)) { for (const element of [].concat(...document.body.children)) { EventHandler.on(element, 'mouseover', noop) } @@ -215,7 +214,7 @@ class Dropdown extends BaseComponent { return config } - _createPopper(parent) { + _createPopper() { if (typeof Popper === 'undefined') { throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)') } @@ -223,7 +222,7 @@ class Dropdown extends BaseComponent { let referenceElement = this._element if (this._config.reference === 'parent') { - referenceElement = parent + referenceElement = this._parent } else if (isElement(this._config.reference)) { referenceElement = getElement(this._config.reference) } else if (typeof this._config.reference === 'object') { @@ -238,12 +237,8 @@ class Dropdown extends BaseComponent { return element.classList.contains(CLASS_NAME_SHOW) } - _getMenuElement() { - return SelectorEngine.next(this._element, SELECTOR_MENU)[0] - } - _getPlacement() { - const parentDropdown = this._element.parentNode + const parentDropdown = this._parent if (parentDropdown.classList.contains(CLASS_NAME_DROPEND)) { return PLACEMENT_RIGHT -- cgit v1.2.3 From 7f04f84bf8562f2d8456649ee3cf78d181b52875 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Mon, 13 Dec 2021 02:17:03 +0200 Subject: Dropdown: use only one check for shown state --- js/src/dropdown.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index efc3f2be3..f63630409 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -114,7 +114,7 @@ class Dropdown extends BaseComponent { } show() { - if (isDisabled(this._element) || this._isShown(this._menu)) { + if (isDisabled(this._element) || this._isShown()) { return } @@ -149,7 +149,7 @@ class Dropdown extends BaseComponent { } hide() { - if (isDisabled(this._element) || !this._isShown(this._menu)) { + if (isDisabled(this._element) || !this._isShown()) { return } @@ -233,8 +233,8 @@ class Dropdown extends BaseComponent { this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig) } - _isShown(element = this._element) { - return element.classList.contains(CLASS_NAME_SHOW) + _isShown() { + return this._menu.classList.contains(CLASS_NAME_SHOW) } _getPlacement() { -- cgit v1.2.3 From d10543923531d9a2bf0e122439d5b1a2ae4e3d13 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sun, 30 Jan 2022 23:50:22 +0200 Subject: Dropdown: merge instance identification in `dataApiKeydownHandler` As we use the `dataApiKeydownHandler` only for events that are triggered on `[data-bs-toggle="dropdown"]` or on `.dropdown-menu`, we can ensure that their `parentNode` will ALWAYS be the `.dropdown` wrapper --- js/src/dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index f63630409..779fe8f19 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -414,7 +414,7 @@ class Dropdown extends BaseComponent { return } - const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] + const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode) const instance = Dropdown.getOrCreateInstance(getToggleButton) if (isEscapeEvent) { -- cgit v1.2.3 From c14fc989df8dc107b0ba86c241487b192841d753 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Mon, 31 Jan 2022 00:07:05 +0200 Subject: Dropdown: dropdown doesn't document `data-bs-target` option & `parentNode` is ALWAYS the wrapper for toggle & menu --- js/src/dropdown.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 779fe8f19..ed3feceb8 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -9,7 +9,6 @@ import * as Popper from '@popperjs/core' import { defineJQueryPlugin, getElement, - getElementFromSelector, getNextActiveElement, isDisabled, isElement, @@ -90,7 +89,7 @@ class Dropdown extends BaseComponent { super(element, config) this._popper = null - this._parent = getElementFromSelector(this._element) || this._element.parentNode // dropdown wrapper + this._parent = this._element.parentNode // dropdown wrapper this._menu = SelectorEngine.findOne(SELECTOR_MENU, this._parent) this._inNavbar = this._detectNavbar() } -- cgit v1.2.3 From c44d99f55c0e1dcc5a23a9f420972bfccfcddb13 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Mon, 31 Jan 2022 00:09:13 +0200 Subject: Dropdown: use destructured variables in `dataApyKeydownHandler` --- js/src/dropdown.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index ed3feceb8..5635ec96e 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -385,9 +385,10 @@ class Dropdown extends BaseComponent { // - If key is not UP or DOWN => not a dropdown command // - If trigger inside the menu => not a dropdown command - 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) + 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) if (!isInput && !(isUpOrDownEvent || isEscapeEvent)) { return @@ -395,12 +396,12 @@ class Dropdown extends BaseComponent { if (isInput && !isEscapeEvent) { // eslint-disable-next-line unicorn/no-lonely-if - if (!isUpOrDownEvent || event.target.closest(SELECTOR_MENU)) { + if (!isUpOrDownEvent || target.closest(SELECTOR_MENU)) { return } } - const isActive = this.classList.contains(CLASS_NAME_SHOW) + const isActive = delegateTarget.classList.contains(CLASS_NAME_SHOW) if (!isActive && isEscapeEvent) { return @@ -413,7 +414,7 @@ class Dropdown extends BaseComponent { return } - const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode) + const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, delegateTarget.parentNode) const instance = Dropdown.getOrCreateInstance(getToggleButton) if (isEscapeEvent) { -- cgit v1.2.3 From 353ad45b4b8dd3235a9e26dcc614baaa7fa1a840 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sat, 19 Feb 2022 16:16:51 +0200 Subject: Dropdown: use a combined selector to filter foreign not shown instances iteration (#35766) --- js/src/dropdown.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 5635ec96e..4bb1379f5 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -50,6 +50,7 @@ const CLASS_NAME_DROPEND = 'dropend' const CLASS_NAME_DROPSTART = 'dropstart' const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]' +const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}` const SELECTOR_MENU = '.dropdown-menu' const SELECTOR_NAVBAR = '.navbar' const SELECTOR_NAVBAR_NAV = '.navbar-nav' @@ -341,18 +342,14 @@ class Dropdown extends BaseComponent { return } - const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE) + const openToggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE_SHOWN) - for (const toggle of toggles) { + for (const toggle of openToggles) { const context = Dropdown.getInstance(toggle) if (!context || context._config.autoClose === false) { continue } - if (!context._isShown()) { - continue - } - const composedPath = event.composedPath() const isMenuTarget = composedPath.includes(context._menu) if ( -- cgit v1.2.3 From cb8726d9e75b10c52c84753da171daacd78aee90 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Sat, 19 Feb 2022 16:22:32 +0200 Subject: Dropdown: use a better selector to avoid triggering click if button is disabled (#35866) --- js/src/dropdown.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 4bb1379f5..da56f4825 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -49,7 +49,7 @@ const CLASS_NAME_DROPUP = 'dropup' const CLASS_NAME_DROPEND = 'dropend' const CLASS_NAME_DROPSTART = 'dropstart' -const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]' +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_MENU = '.dropdown-menu' const SELECTOR_NAVBAR = '.navbar' @@ -407,10 +407,6 @@ class Dropdown extends BaseComponent { event.preventDefault() event.stopPropagation() - if (isDisabled(this)) { - return - } - const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, delegateTarget.parentNode) const instance = Dropdown.getOrCreateInstance(getToggleButton) -- cgit v1.2.3 From c0f30366ace5f607e0b70a0e0034d2e8254bad9b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 25 Feb 2022 08:53:17 -0800 Subject: Add centered dropdown and dropup options --- js/src/dropdown.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index da56f4825..2f7ca130f 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -48,6 +48,8 @@ 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}` @@ -62,6 +64,8 @@ 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], @@ -248,6 +252,14 @@ 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' -- cgit v1.2.3 From bb7664db0aea2dddbc637992d2d0e78632dc2e68 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Tue, 1 Mar 2022 15:53:07 +0200 Subject: 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 --- js/src/dropdown.js | 53 ++++++++++++++--------------------------------------- 1 file changed, 14 insertions(+), 39 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 2f7ca130f..c93739b52 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -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 - - 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) - - if (!isInput && !(isUpOrDownEvent || isEscapeEvent)) { + // 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 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 (!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) } } -- cgit v1.2.3 From 6c40476af9b2d54fc8029294be1d9e4e8a246482 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Tue, 8 Mar 2022 12:34:21 +0100 Subject: Fix dropdowns --- js/src/dropdown.js | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index c93739b52..65b3aa372 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -48,6 +48,8 @@ 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}` @@ -62,6 +64,8 @@ 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], @@ -248,6 +252,14 @@ 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' @@ -400,8 +412,12 @@ class Dropdown extends BaseComponent { const instance = Dropdown.getOrCreateInstance(getToggleButton) if (isEscapeEvent) { - instance.hide() - getToggleButton.focus() + if (getToggleButton.classList.contains(CLASS_NAME_SHOW)) { + instance.hide() + getToggleButton.focus() + event.stopPropagation() + } + return } -- cgit v1.2.3 From cfd2f3f7787ba22feb78d916956f6f73746f3ee3 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Thu, 10 Mar 2022 13:24:47 +0200 Subject: Update dropdown.js minor refactoring --- js/src/dropdown.js | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 65b3aa372..dfa9a63aa 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -404,25 +404,22 @@ class Dropdown extends BaseComponent { } event.preventDefault() - if (!isEscapeEvent) { - event.stopPropagation() - } const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode) const instance = Dropdown.getOrCreateInstance(getToggleButton) - if (isEscapeEvent) { - if (getToggleButton.classList.contains(CLASS_NAME_SHOW)) { - instance.hide() - getToggleButton.focus() - event.stopPropagation() - } - + if (isUpOrDownEvent) { + event.stopPropagation() + instance.show() + instance._selectMenuItem(event) return } - instance.show() - instance._selectMenuItem(event) + if (instance._isShown()) { // else is escape and we check if it is shown + event.stopPropagation() + instance.hide() + getToggleButton.focus() + } } } -- cgit v1.2.3 From f7e8ca91e03165abb82d4c82555dc4ef96340cc9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 6 May 2022 23:57:58 +0300 Subject: Prepare v5.2.0-beta1 --- js/src/dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index dfa9a63aa..87dc49676 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.1.3): dropdown.js + * Bootstrap (v5.2.0-beta1): dropdown.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -- cgit v1.2.3 From c137d11aa2df111e2a42bc42295576fdd366fd68 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Thu, 19 May 2022 15:35:44 +0200 Subject: Re-ordering js default objects --- js/src/dropdown.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 87dc49676..1646362d0 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -68,21 +68,21 @@ const PLACEMENT_TOPCENTER = 'top' const PLACEMENT_BOTTOMCENTER = 'bottom' const Default = { - offset: [0, 2], + autoClose: true, boundary: 'clippingParents', - reference: 'toggle', display: 'dynamic', + offset: [0, 2], popperConfig: null, - autoClose: true + reference: 'toggle' } const DefaultType = { - offset: '(array|string|function)', + autoClose: '(boolean|string)', boundary: '(string|element)', - reference: '(string|element|object)', display: 'string', + offset: '(array|string|function)', popperConfig: '(null|object|function)', - autoClose: '(boolean|string)' + reference: '(string|element|object)' } /** -- cgit v1.2.3 From edf9c40956d19e6ab3f9151bfe0dfac6be06fa21 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 19 Jul 2022 18:43:58 +0300 Subject: Release v5.2.0 (#36768) * Bump version to 5.2.0 * Dist * Update masthead.html --- js/src/dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 1646362d0..601792953 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.0-beta1): dropdown.js + * Bootstrap (v5.2.0): dropdown.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -- cgit v1.2.3 From 337068f8b1044004f4b9abfffbb433694ae87993 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Fri, 2 Sep 2022 09:52:33 +0200 Subject: fix(dropdowns): Fix multiple dropdowns when they are inside the same tag (#37011) --- js/src/dropdown.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 601792953..424b187ff 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -95,7 +95,8 @@ class Dropdown extends BaseComponent { this._popper = null this._parent = this._element.parentNode // dropdown wrapper - this._menu = SelectorEngine.findOne(SELECTOR_MENU, this._parent) + // todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.2/forms/input-group/ + this._menu = SelectorEngine.next(this._element, SELECTOR_MENU)[0] || SelectorEngine.prev(this._element, SELECTOR_MENU)[0] this._inNavbar = this._detectNavbar() } @@ -405,7 +406,8 @@ class Dropdown extends BaseComponent { event.preventDefault() - const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode) + // todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.2/forms/input-group/ + const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] || SelectorEngine.next(this, SELECTOR_DATA_TOGGLE)[0] const instance = Dropdown.getOrCreateInstance(getToggleButton) if (isUpOrDownEvent) { -- cgit v1.2.3 From 23e50829f958ea1d741d63e2781716be037e4644 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 7 Sep 2022 18:31:39 +0300 Subject: Release v5.2.1 (#37098) * Bump version to v5.2.1. * Dist --- js/src/dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 424b187ff..607ab27ba 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.0): dropdown.js + * Bootstrap (v5.2.1): dropdown.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -- cgit v1.2.3 From 597c4023141dc48868889b85676b2d7269411d23 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Tue, 27 Sep 2022 10:39:11 +0300 Subject: Dropdown: fix case with invalid markup (#37190) This fixes a backward incompatible change in v5.2.1 where `.drodown-toggle` isn't present in the markup. --- js/src/dropdown.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 607ab27ba..f8dafc21b 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -96,7 +96,9 @@ class Dropdown extends BaseComponent { this._popper = null this._parent = this._element.parentNode // dropdown wrapper // todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.2/forms/input-group/ - this._menu = SelectorEngine.next(this._element, SELECTOR_MENU)[0] || SelectorEngine.prev(this._element, SELECTOR_MENU)[0] + this._menu = SelectorEngine.next(this._element, SELECTOR_MENU)[0] || + SelectorEngine.prev(this._element, SELECTOR_MENU)[0] || + SelectorEngine.findOne(SELECTOR_MENU, this._parent) this._inNavbar = this._detectNavbar() } @@ -407,7 +409,12 @@ class Dropdown extends BaseComponent { event.preventDefault() // todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.2/forms/input-group/ - const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] || SelectorEngine.next(this, SELECTOR_DATA_TOGGLE)[0] + const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? + this : + (SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] || + SelectorEngine.next(this, SELECTOR_DATA_TOGGLE)[0] || + SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode)) + const instance = Dropdown.getOrCreateInstance(getToggleButton) if (isUpOrDownEvent) { -- cgit v1.2.3 From 961d5ff9844372a4e294980c667bbe7e0651cdeb Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 3 Oct 2022 10:44:02 +0300 Subject: Release v5.2.2 (#37236) * Bump version to v5.2.2 * Dist --- js/src/dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index f8dafc21b..b05d92cf7 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.1): dropdown.js + * Bootstrap (v5.2.2): dropdown.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -- cgit v1.2.3 From 4cb046a6b8b37a0f328fa5b86fbd573ca3f0dc33 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Fri, 7 Oct 2022 15:25:00 +0300 Subject: Boost `execute` function, being able to handle arguments (#36652) --- js/src/dropdown.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index b05d92cf7..d37886d89 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -8,6 +8,7 @@ import * as Popper from '@popperjs/core' import { defineJQueryPlugin, + execute, getElement, getNextActiveElement, isDisabled, @@ -319,7 +320,7 @@ class Dropdown extends BaseComponent { return { ...defaultBsPopperConfig, - ...(typeof this._config.popperConfig === 'function' ? this._config.popperConfig(defaultBsPopperConfig) : this._config.popperConfig) + ...execute(this._config.popperConfig, [defaultBsPopperConfig]) } } -- cgit v1.2.3 From aa9d32dd153ed16943ad8be5e8795afaad24d0cf Mon Sep 17 00:00:00 2001 From: GeoSot Date: Wed, 26 Oct 2022 08:26:51 +0300 Subject: Use explicit imports in our javascript source files (#36854) --- js/src/dropdown.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index d37886d89..6f9adcbe6 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -16,11 +16,11 @@ import { isRTL, isVisible, noop -} from './util/index' -import EventHandler from './dom/event-handler' -import Manipulator from './dom/manipulator' -import SelectorEngine from './dom/selector-engine' -import BaseComponent from './base-component' +} from './util/index.js' +import EventHandler from './dom/event-handler.js' +import Manipulator from './dom/manipulator.js' +import SelectorEngine from './dom/selector-engine.js' +import BaseComponent from './base-component.js' /** * Constants -- cgit v1.2.3 From 39589472f709ddf7d614ffd4f0ab1a50e542ac91 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 21 Nov 2022 20:15:33 +0200 Subject: Bump version to 5.2.3 --- js/src/dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index b05d92cf7..9596baa9a 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.2): dropdown.js + * Bootstrap (v5.2.3): dropdown.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -- cgit v1.2.3 From cf9454caa00872899215603e5e036d9a824b1b11 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Sat, 24 Dec 2022 18:37:22 +0200 Subject: Release v5.3.0-alpha1 (#37661) * Bump version to 5.3.0-alpha1 * Dist * Add docs versions updates * Update note in homepage hero Co-authored-by: Mark Otto --- js/src/dropdown.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index c699598f7..6b7c0cef3 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.2.3): dropdown.js + * Bootstrap (v5.3.0-alpha1): dropdown.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ @@ -96,7 +96,7 @@ class Dropdown extends BaseComponent { this._popper = null this._parent = this._element.parentNode // dropdown wrapper - // todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.2/forms/input-group/ + // todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.3/forms/input-group/ this._menu = SelectorEngine.next(this._element, SELECTOR_MENU)[0] || SelectorEngine.prev(this._element, SELECTOR_MENU)[0] || SelectorEngine.findOne(SELECTOR_MENU, this._parent) @@ -409,7 +409,7 @@ class Dropdown extends BaseComponent { event.preventDefault() - // todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.2/forms/input-group/ + // todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.3/forms/input-group/ const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : (SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] || -- cgit v1.2.3 From ab049cd4a02650ca95d490217f93bd628f9295a6 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Wed, 22 Mar 2023 09:12:33 +0200 Subject: Remove version comment from JavaScript src files (#38294) --- js/src/dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 6b7c0cef3..b2030f7a8 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -1,6 +1,6 @@ /** * -------------------------------------------------------------------------- - * Bootstrap (v5.3.0-alpha1): dropdown.js + * Bootstrap dropdown.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) * -------------------------------------------------------------------------- */ -- cgit v1.2.3 From ae43f0c48bf7acede8a325b24197001fe2b2f416 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 29 Mar 2023 20:49:30 +0300 Subject: Tweak and re-organize ESLint config (#38369) * Tweak and re-organize ESLint config * merge individual configs to the root config * enable more eslint-plugin-import rules * lint markdown files * Lint --- js/src/dropdown.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index b2030f7a8..af5fd16fc 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -6,6 +6,10 @@ */ import * as Popper from '@popperjs/core' +import BaseComponent from './base-component.js' +import EventHandler from './dom/event-handler.js' +import Manipulator from './dom/manipulator.js' +import SelectorEngine from './dom/selector-engine.js' import { defineJQueryPlugin, execute, @@ -17,10 +21,6 @@ import { isVisible, noop } from './util/index.js' -import EventHandler from './dom/event-handler.js' -import Manipulator from './dom/manipulator.js' -import SelectorEngine from './dom/selector-engine.js' -import BaseComponent from './base-component.js' /** * Constants @@ -96,7 +96,7 @@ class Dropdown extends BaseComponent { this._popper = null this._parent = this._element.parentNode // dropdown wrapper - // todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.3/forms/input-group/ + // TODO: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.3/forms/input-group/ this._menu = SelectorEngine.next(this._element, SELECTOR_MENU)[0] || SelectorEngine.prev(this._element, SELECTOR_MENU)[0] || SelectorEngine.findOne(SELECTOR_MENU, this._parent) @@ -311,7 +311,7 @@ class Dropdown extends BaseComponent { // Disable Popper if we have a static display or Dropdown is in Navbar if (this._inNavbar || this._config.display === 'static') { - Manipulator.setDataAttribute(this._menu, 'popper', 'static') // todo:v6 remove + Manipulator.setDataAttribute(this._menu, 'popper', 'static') // TODO: v6 remove defaultBsPopperConfig.modifiers = [{ name: 'applyStyles', enabled: false @@ -409,7 +409,7 @@ class Dropdown extends BaseComponent { event.preventDefault() - // todo: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.3/forms/input-group/ + // TODO: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.3/forms/input-group/ const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : (SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] || -- cgit v1.2.3 From 953b4b6c1b67e120235fc19f565444a0f7a97a76 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Mon, 4 Mar 2024 20:58:00 +0200 Subject: Fix various redirects --- js/src/dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index af5fd16fc..9190b3ed5 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -224,7 +224,7 @@ class Dropdown extends BaseComponent { _createPopper() { if (typeof Popper === 'undefined') { - throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)') + throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org/docs/v2/)') } let referenceElement = this._element -- cgit v1.2.3 From 16d80a4ff7b42da57215783cc8ff85d6f0627630 Mon Sep 17 00:00:00 2001 From: Nathan Sarang-Walters Date: Thu, 18 Jul 2024 22:05:21 -0700 Subject: Fix `this` reference for JavaScript functions (#38725) --- js/src/dropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/src/dropdown.js') diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 9190b3ed5..96094a3e6 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -320,7 +320,7 @@ class Dropdown extends BaseComponent { return { ...defaultBsPopperConfig, - ...execute(this._config.popperConfig, [defaultBsPopperConfig]) + ...execute(this._config.popperConfig, [undefined, defaultBsPopperConfig]) } } -- cgit v1.2.3