@AStoker add some unit tests. Just to avoid future breaking changes.

@AStoker could you add the expected unit tests please :)

Was on vacation, sorry. I'm playing catch up this week at work, I'll try and add some tests to ensure it works in the future, unless someone beats me to the punch.

@AStoker Thanks for feedback! After it, the PR is ok for merge 🎉

can you try this, hope this help -->select2/select2-bootstrap-theme#41 (comment)

Any feedbacks or news about this PR? Can we expect a fix to be released any time soon? Thanks!

Working on adding tests now, then PR will be updated

@pedrofurtado , looks like tests don't run right now. Also looks like a very out of date version of Grunt is being used that causes builds to fail with node 10. Anything on that?

Also, any feedback on this comment? The test is a bit tricky with qunit because in order to test properly, I need select2 to think that it has to position the dropdown above (looks like there aren't tests for that?). That's what I'm working on right now.

@pedrofurtado, if I can get some guidance on how to write a test so that I can test the options box being above the select box, I'd appreciate it. I'm looking at the tests, and nothing covers those cases (that I can see), and the code makes it difficult to test such cases.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

IMHO, this PR should not be closed. This PR should be merged in the near future but first, according to the last messages, some tests need to be written.

Status hasn't changed. Need some guidance in the tests, the code isn't easy to test and the patterns to test it I'm having a hard time reproducing to properly test the behavior.

Has this PR been merged to the main branch?

No, not yet.

Has the PR been merged?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Thanks little stale bot but this issue should not be closed.

It seems to be taking a while to get this PR merged. Here is a workaround that seems to work for many people (including me). My implementation below:

    // data-select2 conflicts with library code. data-something-select2 works
    // set the dropdownParent to fix positioning error
    // https://github.com/select2/select2-bootstrap-theme/issues/41#issuecomment-310825598
    $("select[data-use-select2]").each(function() {
        $(this).select2({
            theme: "bootstrap4",
            dropdownParent: $(this).parent()
        });
    });

Just tested out version 4.0.9 where this is listed as one of the 'fixes'. For me, it is doing the exact opposite. I never had a problem with positioning when opened above with prior versions and now I have a small gap between the actual select box and the dropdown (only when opened above). Typing in the search box creates a huge gap. I found that changing the screen size (like minimizing it) must force a recalculation and it aligns fine afterwards. Also, when typing in the search box the same appears to happen when when no results are found, but while there are results it stays out of position.

For me, 4.0.9 cannot be used with this problem and I will be staying with 4.0.8 until this is figured out properly.

The problem happens with or without 'dropdownParent' set. Not sure if it matters, but I am using 'selectionAdapter' and 'dropdownAdapter', however, there was no issue with these when using 4.0.8.

@morrow95 there's a nonzero chance that the bug you're describing is unrelated to this fix, especially if it's "corrected" when a message is displayed. Can you make a new ticket for it (and reference this PR comment)?

@kevin-brown Same everything on my end except I loaded 4.0.9 and have this problem. I load 4.0.8 back and it goes away. Looking at the 'change' list on the release page this seemed like the most logical change that caused this.

@morrow95 I can kind of reproduce the issue you're probably seeing on the documentation website.

Since this is a pull request, we can't reopen the ticket and look into the issue further. So can you please create a new ticket for this issue and we can triage it there.

I had a similar problem where the top position of the dropdown was messed up specifically on mobile devices. Nonetheless, the solution was simple for this problem, as @marcosg also mentioned above. You need to add the dropdownParent property in your select2 call. Something like what I have mentioned below.

this.$('#country').select2({
  placeholder: 'Please select',
  dropdownParent: this.$('#country').parent(),
})

This is needed because if dropdownParent attribute is not present, it is equivalent to saying
dropdownParent: $(document.body) and therefore you will find your dropdown html attached at the very end of the body.

It's a bummer that there was no guidance on testing available and this PR ended up stalling out.

This fix seems to work perfectly and resolves a pretty glaring issue where the dropdown does not render in the correct location (instead it's way further away from it's select).

Thank you @AStoker for keeping your branch available. I've switched my project over to use your branch and the problem is resolved.