Select2 search input does not receive focus upon opening

Question

I'm having an issue with select2 dropdowns retaining focus upon being opened.

Basically when you click on a dropdown with select2 a special select2 dropdown is shown with a text input at the top so you can start typing and narrow down your select options. Well, when the select2 dropdown opens the focus is NOT in the search input. Its still on the original select html element.

This is a WORKING select2 dropdown on CodePen just as an example. I can't replicate the issue I'm having within CodePen, so it makes me think its something conflicting on my site. But I don't know what and I can't seem to narrow it down.

https://codepen.io/anon/pen/QmoGew

see codepen for sample working code

I can see the focus go into the search input upon opening but it immediately goes away. Does anyone have any ideas why this could be happening??

Here are my dependencies from my package.json file:

"devDependencies": {
    "axios": "^0.17",
    "bootstrap": "^4.0.0",
    "browser-sync": "^2.23.6",
    "browser-sync-webpack-plugin": "^2.2.2",
    "cross-env": "^5.1.4",
    "jquery": "^3.2",
    "laravel-mix": "^2.1.11",
    "lodash": "^4.17.4",
    "vue": "^2.5.16",
    "vue-resource": "^0.9.3",
    "vue-router": "^2.6.0",
    "vuex": "^2.5.0",
    "webpack": "^3.10.0"
},
"dependencies": {
    "dropzone": "^5.4.0",
    "mini-toastr": "^0.7.2",
    "popper.js": "^1.14.3",
    "sweetalert": "^2.1.0",
    "vue-notifications": "^0.9.0",
    "select2": "^4.0.6-rc.1"
}

And this is how I am compiling everything within webpack.mix.js

mix.browserSync('127.0.0.1:8000')
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .styles([
        'node_modules/bootstrap/css/bootstrap.min.css',
        'node_modules/dropzone/dist/min/dropzone.min.css',
        'node_modules/select2/dist/css/select2.min.css'
    ], 'public/css/libs.css')
    .sourceMaps()
    .version();

mix.combine([
    'node_modules/jquery/dist/jquery.min.js',
    'node_modules/sweetalert/dist/sweetalert.min.js',
    'node_modules/dropzone/dist/min/dropzone.min.js',
    'node_modules/select2/dist/js/select2.full.min.js'
], 'public/js/app.js')
.sourceMaps();

Answer 1

$('#element_id').select2('open');

Should do the trick !