Dropdowns: Modified Dropdown's _parent to use a new method called 'cl…

[classicmike]

Dropdowns: Modified Dropdown's _parent to use a new method called 'closest', to allow dropdown menus to not necessarily be the sibling of the trigger button element. So instead of trying to use dropdown wrapper as the direct parent, it can be an ancestor.

Description

This is a non-breaking improvement change to the Dropdown and Selector Engine JS files. More in the Motivation or context. But the long story short is that inside the dropdown's constructor, instead of setting this._parent to the direct parent element, this change will use a new method for the selector engine called closest which will find the closest ancestor that contains the dropdown menu element. This will then allow a not-so restrictive DOM structure. All existing behaviour as per Bootstrap documentation remains the same.

Motivation & Context

Currently, I'm trying to create web components that use Bootstrap's dropdowns as the main mechanism for our dropdowns in our design system. Currently based on the Dropdown's constructor, this._parent is set to only use the this._element's direct parent. So as per documentation, it allows usages like this:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>

  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Which is fine for most use cases. However, in our use case, since it is a design system, we also create web components for things such as buttons like this:

<design-system-dropdown>
    <design-system-button>Trigger Dropdown</design-system-button>
    <design-system-dropdown-menu>
        <design-system-dropdown-item>
            <a href="https://google.com" target="_blank">Go to Google</a>
        </design-system-dropdown-item>
    </design-system-dropdown-menu>
</design-system-dropdown>

On render, the HTML would look something typical to this:

<design-system-dropdown class="dropdown">
    <design-system-button>
        <button class="btn btn-primary dropdown-trigger" data-bs-toggle="dropdown">Trigger Dropdown</button>
    </design-system-button>
    <design-system-dropdown-menu class class="dropdown-menu">
        <design-system-dropdown-item>
            <a href="https://google.com" class="dropdown-item" target="_blank">Go to Google</a>
        </design-system-dropdown-item>
    </design-system-dropdown-menu>
</design-system-dropdown>

As you can see in the above, the button with the data-bs-toggle which is the element in the dropdown constructor is not a sibling of the .dropdown-menu element, so when the dropdown open is called, the code is stuck because of the restrictive HTML structure.

The proposed changes will address the issue whilst maintaining the original intent of the HTML structure of these elements, and works for the current HTML structure. I have tested this with all of the combinations within the Bootstrap documentation including dropdowns inside navbars, split dropdown and standard default use cases.

In terms of documentation, I don't feel a change is required on that front since all of the use cases in the documentation have not changed.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

[julien-deramond]

Just for information, :has cannot be used right now in Bootstrap v5 because of our browser support (see .browserslistrc. It'll be upgraded in v6.