With my code exactly the same there were no issues with 4.0.8. It was only when I loaded 4.0.9 that I noticed this problem. I spent some time tonight trying to track this down and I am able to replicate it. This seems to involve themes and positioning of the dropdown (calculation more than likely). Here is what I found :

DOES NOT WORK when shown above input :

.select2-container--bootstrap4 is my theme class

theme: 'bootstrap4'

WORKS when shown above input, but not loading my theme so using default css :

.select2-container--bootstrap4 is my theme class

//theme: 'bootstrap4' //not loading my theme css at all

DOES NOT WORK when shown above input :

.select2-container (my theme css is now directly overwriting the default)

theme: 'bootstrap4' //loading an 'empty' theme

WORKS when shown above input :

.select2-container (my theme css is now directly overwriting the default)

//theme: 'bootstrap4' //not loading an 'empty' theme

Weird to say the least.

I am totally guessing here and I am not familiar with the internal js for select2, but since this all worked fine with version 4.0.8 it seems that maybe there is a calculation being made for positioning of the dropdown that is not taking theme css into account or maybe before it is applied?

The reason I say that is if I do not load any theme, yet change my theme css to directly overwrite the default it works. If I load a 'blank' theme and still change my theme css to directly overwrite the default it doesn't. In the 4.0.9 release it mentions 'Fix dropdown positioning when displayed above with messages' in the changelog... I would assume this is related since this worked in 4.0.8.