Big <b-dropdown>s are unusable when used inside an `overflow:scroll` container, due to being constrained inside it

This is a followup to https://github.com/twbs/bootstrap/issues/24251 .

Problem

When using a bootstrap-vue (1.0.0-beta.9) <b-dropdown> in an element that is a child of an overflow:scroll element, the dropdown is “stuck” inside the container, making it unusable if the dropdown contents are too big horizontally/vertically (see demo at JSFiddle/ronj/t6z6Lnfb):

Contrarily, a vanilla HTML <select> will merrily bleed out of the overflow:scroll element as necessary:

Native Bootstrap workaround & need help for bootstrap-vue

Over at https://github.com/twbs/bootstrap/issues/24251#issuecomment-334271729 , @danijelGombac suggests to reparent the dropdown to body:

$(document).on('show.bs.dropdown', '.scrolled-heighted-box', function(e) {
    var dropdown = $(e.target).find('.dropdown-menu');
    dropdown.appendTo('body');
    $(this).on('hidden.bs.dropdown', function () {
        dropdown.appendTo(e.target);
    })
});

… and it works great in pure non-Vue Bootstrap! Now, back to my bootstrap-vue project I’m able to successfully listen to the equivalent and documented $root / bv::dropdown::shown event, but then I’m lost in Vue forum posts mentioning $el / $mount() / $appendTo.

→ 1. Can anyone help me port this workaround to bootstrap-vue? If not, forgetting this re-parenting trick, any other idea to fix the initial problem?

→ 2. If a solution to 1. above is found, it would be awesome if it was encapsulated behind a <b-dropdown> boolean property (name proposal: reparent-to-body?) to do that easily. I’ll be happy to submit a PR with docs.

Use case

A few words on the use case justifying this combination, as shown in the JSFiddle which mimics a webapp I’m working on:

• In the left sidebar live a set of filters. It may contain several filters that will consume undetermined vertical space, thus lives in an overflow-y:scroll div. Each filter has a dropdown which lets users modify filter options.
• In the right pane lives the content, filtered by the filters in the left sidebar.

→ As a user,

1. I do need that overflow-y:scroll sidebar scrolling behavior (because the list of filters is of undetermined and potentially large height, depending on the number of filters)
2. But filter dropdowns (which can be large, both in width due to length of options and height due to count of options) should be able “escape out of” / not be constrained by the sidebar.

And as shown in the demo/screenshots, vanilla HTML <select> don’t suffer from this problem, but it’s not always practical/possible to revert back to using them, e.g. due to using features specific to Bootstrap Dropdown, or for consistent styling.

Details

• bootstrap-vue version: 1.0.0-beta.9
• OS/Browser: Ubuntu 16.04.3 / {Chrome 63, Firefox 58}

Thanks 🙂.

[zeodtr]

@tmorehouse It does not work when the container element has ‘position: absolute’ style.

Currently I’m trying to emulate a dropdown by 2 separate components (one is a button, the other is a dropdown menu). In this configuration, the dropdown menu component is actually out of scrolling container that contains the button component. 2 components are communicating using a common JavaScript object.

[tmorehouse]

There i a minor issue with the feature added in v1.4.0, which will be addressed in the next release.

The position-static class was not always being added in the right context, although the boundary prop is working correctly.