单击对话框上的取消后，Vuetify 组合框没有获得焦点

Question

我的应用中有一个 v-combobox 组件。我将它放在可以在输入中输入内容的位置，然后@blur 碰巧检查输入的项目是否存在于列表中。如果它不存在，则会打开一个模式询问用户是否要将其添加到列表中。

如果用户单击“是”我有它被添加到列表中我遇到的问题是如果他们单击取消并且对话框已关闭焦点应该返回到 combobx 输入

当我尝试设置焦点时，我得到蓝色动画栏，但在组合框的输入中没有输入光标

我已经为我的问题设置了一个代码框示例

CodeSandbox Example of Issue

我想知道是否可以得到一些帮助或指示，说明为什么我在单击对话框上的取消后无法完全专注于打字。

Answer 1

您可以尝试像这样使用 $nextTick：

    closeConfirmationDialog() {
      // const comboBox = this.$refs[this.forInput];
      // comboBox.$el.querySelector("input").focus();
      this.showDialog = false;
      this.cancelDialog = true;
      this.$nextTick(() => {
        this.$refs.categories.focus();
      });
    }