使用Vue Multiselect创建一个无序列表，当用户按Enter键选择一个项目时，如何让焦点返回到输入？即：
1. 用户搜索项目
2. 用户点击回车
3. 项目被添加到列表中（如当前发生的那样）
4. 焦点返回到输入并关闭下拉菜单，以便用户可以输入新条目。
将非常感谢任何帮助:)
我尝试将 close-on-select 更改为 false 以正确返回焦点但使下拉菜单保持打开状态，这并不理想，因为它隐藏了下面的内容。
https://jsfiddle.net/hugodesigns/rtogxe4s/?utm_source=website&utm_medium=embed&utm_campaign=rtogxe4s
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
options: [
],
optionsProxy: [],
selectedResources: [],
showLoadingSpinner: false
},
methods: {
customLabel (option) {
return `${option.name} - ${option.version}`
},
updateSelected(value) {
value.forEach((resource) => {
// Adds selected resources to array
this.selectedResources.push(resource)
})
// Clears selected array
// This prevents the tags from being displayed
this.optionsProxy = []
},
cdnRequest(value) {
this.$http.get(`https://api.cdnjs.com/libraries?search=${value}&fields=version,description`).then((response) => {
// get body data
this.options = []
response.body.results.forEach((object) => {
this.options.push(object)
});
this.showLoadingSpinner = false
}, (response) => {
// error callback
})
},
searchQuery(value) {
this.showLoadingSpinner = true
// GET
this.cdnRequest(value)
},
removeDependency(index) {
this.selectedResources.splice(index, 1)
}
},
created() {
const value = ''
this.cdnRequest(value)
}
}).$mount('#app')
当前结果是一个项目被添加到列表中并且多选失去焦点，因此必须再次单击才能输入更多输入。
预期的行为是一个项目被添加到列表中并且焦点返回到多选，准备接受输入，下拉关闭。