Merge branch 'main' into patrickhlauke-navs-tabs

Author: patrickhlauke

js/src/dropdown.js

@@ -72,7 +72,7 @@ const PLACEMENT_RIGHT = isRTL ? 'left-start' : 'right-start'
 const PLACEMENT_LEFT = isRTL ? 'right-start' : 'left-start'
 
 const Default = {
-  offset: [0, 0],
+  offset: [0, 2],
   flip: true,
   boundary: 'clippingParents',
   reference: 'toggle',
@@ -194,20 +194,19 @@ class Dropdown extends BaseComponent {
 
     this._menu.classList.toggle(CLASS_NAME_SHOW)
     this._element.classList.toggle(CLASS_NAME_SHOW)
-    EventHandler.trigger(parent, EVENT_SHOWN, relatedTarget)
+    EventHandler.trigger(this._element, EVENT_SHOWN, relatedTarget)
   }
 
   hide() {
     if (this._element.disabled || this._element.classList.contains(CLASS_NAME_DISABLED) || !this._menu.classList.contains(CLASS_NAME_SHOW)) {
       return
     }
 
-    const parent = Dropdown.getParentFromElement(this._element)
     const relatedTarget = {
       relatedTarget: this._element
     }
 
-    const hideEvent = EventHandler.trigger(parent, EVENT_HIDE, relatedTarget)
+    const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE, relatedTarget)
 
     if (hideEvent.defaultPrevented) {
       return
@@ -219,7 +218,7 @@ class Dropdown extends BaseComponent {
 
     this._menu.classList.toggle(CLASS_NAME_SHOW)
     this._element.classList.toggle(CLASS_NAME_SHOW)
-    EventHandler.trigger(parent, EVENT_HIDDEN, relatedTarget)
+    EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget)
   }
 
   dispose() {
@@ -319,7 +318,7 @@ class Dropdown extends BaseComponent {
         name: 'preventOverflow',
         options: {
           altBoundary: this._config.flip,
-          rootBoundary: this._config.boundary
+          boundary: this._config.boundary
         }
       },
       {
@@ -383,7 +382,6 @@ class Dropdown extends BaseComponent {
     const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
 
     for (let i = 0, len = toggles.length; i < len; i++) {
-      const parent = Dropdown.getParentFromElement(toggles[i])
       const context = Data.getData(toggles[i], DATA_KEY)
       const relatedTarget = {
         relatedTarget: toggles[i]
@@ -409,7 +407,7 @@ class Dropdown extends BaseComponent {
         continue
       }
 
-      const hideEvent = EventHandler.trigger(parent, EVENT_HIDE, relatedTarget)
+      const hideEvent = EventHandler.trigger(toggles[i], EVENT_HIDE, relatedTarget)
       if (hideEvent.defaultPrevented) {
         continue
       }
@@ -429,7 +427,7 @@ class Dropdown extends BaseComponent {
 
       dropdownMenu.classList.remove(CLASS_NAME_SHOW)
       toggles[i].classList.remove(CLASS_NAME_SHOW)
-      EventHandler.trigger(parent, EVENT_HIDDEN, relatedTarget)
+      EventHandler.trigger(toggles[i], EVENT_HIDDEN, relatedTarget)
     }
   }
 
@@ -470,6 +468,12 @@ class Dropdown extends BaseComponent {
       return
     }
 
+    if (!isActive && (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY)) {
+      const button = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0]
+      button.click()
+      return
+    }
+
     if (!isActive || event.key === SPACE_KEY) {
       Dropdown.clearMenus()
       return

js/src/popover.js

@@ -25,6 +25,7 @@ const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
 const Default = {
   ...Tooltip.Default,
   placement: 'right',
+  offset: [0, 8],
   trigger: 'click',
   content: '',
   template: '<div class="popover" role="tooltip">' +

js/src/tooltip.js

@@ -509,7 +509,7 @@ class Tooltip extends BaseComponent {
         {
           name: 'preventOverflow',
           options: {
-            rootBoundary: this.config.boundary
+            boundary: this.config.boundary
           }
         },
         {

js/src/util/index.js

@@ -36,7 +36,20 @@ const getSelector = element => {
   let selector = element.getAttribute('data-bs-target')
 
   if (!selector || selector === '#') {
-    const hrefAttr = element.getAttribute('href')
+    let hrefAttr = element.getAttribute('href')
+
+    // The only valid content that could double as a selector are IDs or classes,
+    // so everything starting with `#` or `.`. If a "real" URL is used as the selector,
+    // `document.querySelector` will rightfully complain it is invalid.
+    // See https://github.com/twbs/bootstrap/issues/32273
+    if (!hrefAttr || (!hrefAttr.includes('#') && !hrefAttr.startsWith('.'))) {
+      return null
+    }
+
+    // Just in case some CMS puts out a full URL with the anchor appended
+    if (hrefAttr.includes('#') && !hrefAttr.startsWith('#')) {
+      hrefAttr = '#' + hrefAttr.split('#')[1]
+    }
 
     selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null
   }