expose popper "strategy" config to dropdown

[719media]

In regards to the issue: https://github.com/twbs/bootstrap/issues/32947

It would be nice if this could be solved with a simple data attribute by exposing a data attribute for popper for strategy, like data-bs-strategy.

Popper documentation: https://popper.js.org/docs/v2/constructors/#strategy Example using existing javascript: https://jsfiddle.net/4gpy025q/1/

Thanks

[719media]

PR in #34120

[Rauce]

I fully agree with this suggestion.

I've just upgraded to BS 5 in my Blazor app. In BS 4, the data-boundary attribute worked great for my dropdown needs, but I'm stuck in BS 5, and still haven't come up with a solution.

Having to use new bootstrap.Dropdown(...) for dropdown popper configuration in a Blazor app is highly inconvenient, as Blazor does not lend itself towards executing JS as DOM elements come in and out of existence during re-renders. The attribute approach, however, works perfectly.

[719media]

alternative PR in #34259 that uses JSON parse to allow more flexibility

[adamgp]

Here is a simple solution that worked for me in the interim to prevent scrolling issues when using dropdowns within a table-responsive class.

BS4 $('[data-bs-toggle="dropdown"]').dropdown({boundary: 'window'});

BS5 $('[data-bs-toggle="dropdown"]').dropdown({popperConfig: {strategy: 'fixed'}});

[GreathostRo]

After more than a few hours and various attempts I found a working version:

const dropdowns = document.querySelectorAll('.dropdown-toggle')
const dropdown = [...dropdowns].map((dropdownToggleEl) => new bootstrap.Dropdown(dropdownToggleEl, {
    popperConfig(defaultBsPopperConfig) {
        return { ...defaultBsPopperConfig, strategy: 'fixed' };
    }
}));