Select2 搜索输入在打开时未获得焦点

Posted 2023-05-07

【中文标题】Select2 搜索输入在打开时未获得焦点

【英文标题】：Select2 search input does not receive focus upon opening

【发布时间】：2018-09-20 20:11:32

【问题描述】：

我遇到了 select2 下拉菜单在打开时保持焦点的问题。

基本上，当您单击带有 select2 的下拉菜单时，会显示一个特殊的 select2 下拉菜单，顶部有一个文本输入，因此您可以开始输入并缩小您的选择选项。好吧，当 select2 下拉菜单打开时，焦点不在搜索输入中。它仍然在原来的 select html 元素上。

这是 CodePen 上的一个 WORKING select2 下拉菜单，仅作为示例。我无法复制我在 CodePen 中遇到的问题，所以它让我认为它在我的网站上存在冲突。但我不知道是什么，我似乎无法缩小范围。

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

see codepen for sample working code

我可以看到焦点在打开时进入搜索输入，但它立即消失了。有谁知道为什么会发生这种情况？

这是我的 package.json 文件中的依赖项：

"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"

这就是我在 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();

【问题讨论】：

也许你想在这里发布你是如何实现你的代码的，包括其他脚本。可能与您拥有的其他 javascript 存在冲突。

好的，我更新了帖子以包含我的 package.json 和我的 webpack 配置。

正如我在您的 codepen 和您的 webpack 中看到的，它们不是同一个版本，您是否测试了 codepen 中的版本？也许不使用完整的，而是仅使用 select2.min.js

【参考方案1】：

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

应该做的伎俩！

【讨论】：

那没有成功。 :( 我尝试了你的建议，但我仍然遇到同样的问题。谢谢你的帮助。还有其他想法吗？

我认为您遇到了某种浏览器问题，因为我打开了您的 codepen 示例并打开了选择输入，每次搜索输入成为焦点并且它根本没有消失。