Попытка сосредоточиться на компоненте codemirror внутри v-карты

Question

У меня проблемы с открытием компонента на комбинации клавиш и настройкой фокуса на этом компоненте.

У меня есть компонент Spotlight.vue, который отображается при определенной комбинации клавиш. Все работает хорошо, за исключением фокуса, где я, кажется, не могу установить фокус на зеркале кода, когда этот компонент находится внутри других компонентов - в моем случае, в диалоговом окне и на карточке.

После некоторых экспериментов я обнаружил, что аддон autorefresh и autofocus работают, но только если кодовое зеркало не находится внутри других компонентов.

Прожектор. vue

<template>
    <div>
    <v-row justify="center">
        <v-dialog
          v-model="dialog"
          max-width="1000"

        >
          <v-card>
            <codemirror v-autofocus
                        id="editor"
                        ref="editor"
                        v-if="dialog === true"
                        v-model="inputCode"
                        :options="cmOptions"
                        >
            </codemirror>
            <textarea v-model="output"/>
          </v-card>
        </v-dialog>
      </v-row>
      </div>
</template>

<script>
  import 'codemirror/addon/display/autorefresh.js'
  import 'codemirror/mode/python/python.js'
  import 'codemirror/theme/monokai.css'
  import'codemirror/addon/selection/active-line.js'
  import'codemirror/addon/selection/mark-selection.js'
  import'codemirror/addon/search/searchcursor.js'
  import'codemirror/addon/hint/show-hint.js'
  import'codemirror/addon/hint/show-hint.css'
  import'codemirror/addon/hint/javascript-hint.js'
  import'codemirror/addon/selection/active-line.js'
  import'codemirror/addon/scroll/annotatescrollbar.js'
  import'codemirror/addon/search/matchesonscrollbar.js'
  import'codemirror/addon/search/searchcursor.js'
  import'codemirror/addon/search/match-highlighter.js'
  import'codemirror/mode/clike/clike.js'
  import'codemirror/addon/edit/matchbrackets.js'
  import'codemirror/addon/comment/comment.js'
  import'codemirror/addon/dialog/dialog.js'
  import'codemirror/addon/dialog/dialog.css'
  import'codemirror/addon/search/searchcursor.js'
  import'codemirror/addon/search/search.js'
  import'codemirror/addon/search/search.js'
  import'codemirror/addon/display/autorefresh.js'
  import'codemirror/addon/display/placeholder.js'
  import'codemirror/keymap/sublime.js'
  import'codemirror/addon/fold/foldgutter.css'
  import'codemirror/addon/fold/brace-fold.js'
  import'codemirror/addon/fold/comment-fold.js'
  import'codemirror/addon/fold/foldcode.js'
  import'codemirror/addon/fold/foldgutter.js'
  import'codemirror/addon/fold/indent-fold.js'
  import'codemirror/addon/fold/markdown-fold.js'
  import'codemirror/addon/fold/xml-fold.js'

  export default {
    props: ["code"],
    components: {

    },
    data() {
      return {
        cmOptions: {
          autoCloseBrackets: true,
          tabSize: 4,
          indentUnit: 4,
          autoRefresh:true,
          autofocus: true,
          styleActiveLine: true,
          lineNumbers: true,
          line: true,
          mode: 'text/x-python',
          extraKeys: { "Ctrl": "autocomplete" },
          theme: "monokai",
          keyMap: "sublime",
        },
        dialog: false,
        inputCode: "",
        output: ""
    }
  },
  mounted() {
      let self = this
      this.$root.$on("call-spotlight", function() {
          if (!self.dialog) {
              self.dialog = true
              self.inputCode = ""
              self.output = "" 
          }
          else
              self.dialog = false
      })
  }
}
</script>

Вкл. main.js У меня есть прослушиватель событий для комбинации клавиш, отвечающих за показ прожектора.

main. js

new Vue({
  router,
  store,
  vuetify,
  mounted() {
      var self = this;
      window.addEventListener('keydown', function(e) {
          // eslint-disable-next-line
          if (e.shiftKey === true && e.code === "Space") {
              self.$root.$emit('call-spotlight')
          }
      })
  },
  render: h => h(App)
}).$mount('#app')

Затем прожектор регистрируется на Приложение. vue: Приложение. vue

<template>
  <v-app class="app" >
   <navigation-bar />
   <spotlight />
  </v-app>
</template>

Цель состоит в том, чтобы при Shift + Пробел открыть диалог и сосредоточиться на компоненте codemirror.