Поле со списком Vuetify не получает фокус после нажатия кнопки отмены в диалоговом окне

Question

В моем приложении есть компонент v-combobox. У меня есть это, где я могу ввести что-то во вход, затем @blur происходит проверка, чтобы увидеть, существует ли введенный элемент в списке или нет. Если его не существует, открывается модальное окно, спрашивающее пользователя, хотят ли они добавить его в список.

У меня он есть, если пользователь нажимает «Да», он добавляется в список, проблема, с которой я столкнулся, заключается в том, что они нажмите «Отмена», и диалоговое окно будет закрыто, фокус должен go вернуться к вводу combobx

Когда я пытаюсь установить фокус, я получаю синюю полосу анимации, но курсор ввода отсутствует во вводе поля со списком

Я установил пример кода для моей проблемы

CodeSandbox Пример проблемы

Мне было интересно, могу ли я получить некоторую помощь или указатели, почему я не получение полного фокуса, чтобы иметь возможность печатать после нажатия кнопки отмены в диалоговом окне.

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();
      });
    }