How to force .blur() and .focus()

[caiokawasaki]

After a few functions I need to force my JavaScript to .blur() and .focus() the code editor. How to achieve this?

[lino]

Have you had a look at the https://codemirror.net/doc/manual.html#addon_autorefresh plugin?

[mike-seekwell]

my cm appears using v-if, I got it to focus using:

cmOptions: {
    tabSize: 4,
    mode: 'text/x-mysql',
    lineNumbers: false,
    line: false,
    placeholder: 'Code',
    autofocus: true,
  },

[lana-k]

In a case when you need to focus with JavaScript use codemirror property to access the actual editor and call focus. Let's say you have the following:

<codemirror ref="cm" v-model="code" :options="cmOptions" @changes="onChange" />

Now you can get the element via $refs.cm, then access the editor (.codemirror) and call focus:

this.$refs.cm.codemirror.focus()

[cokuna-pavelkosolapov]

I need .focus and .blur too. the component CodeMirror(6) doesn't have these methods, but the codemirror api itself does.

so this line: this.$refs.cm.codemirror.focus() doesn't work.

[jblyberg]

+1 those methods are not available to force focus.

[gui117]

For who use codemirror v6 and wants to call methods from state or view instance.You can get instance from ready callback.

<codemirror v-model="code" @ready="handleReady" />

const editorView = shallowRef()
const editorState = shallowRef()
const handleReady = ({ view, state }) => {
  editorView.value = view
  editorState.value = state
}
// Now you can call focus methods.
editorView.value.focus()