Hide Autocomplete Panel on Blur

v6
1

How do I hide the autocomplete suggestions when you blur away from the editor. Currently when autocomplete pops up, if you click out of the editor, the autocomplete still shows, I want to hide it when you unfocus.

I added an domEventHandler for blur, but unsure how to actually trigger hiding that panel?

EditorView.domEventHandlers({
blur: (event, view: EditorView) => {}
}),

2

You can use closeCompletion. See doc.

3

Thanks for the info.

I am a bit confused how to actually trigger the command on a blur event.
I tried closeCompletion.apply() but it throws an error and I am unsure of what the arguments to pass are.

In the domEventHandler, how do I actually trigger the closeCompletion command?

4

Actually I don’t know how to

this.view.contentDOM.onblur = (event => {
      // trigger closeCompletion
})

I hope @marijn can help us. I’m also interested about this issue.

5

The docs list closeCompletion's type as Command. Clicking on that takes you to its definition, which shows that it is a function taking a view. So to apply it, you call it with your view.

Below patch adds this as default behavior.

1 Like
6

Thanks for making the patch, I see its committed in the codebase, are you responsible for updating the npm to pick up the changes so I can use the config option?

Also tried passing the view but I get the an error as well complaining about the state. Does this command need to be dispatch as a transaction or can you simply call apply on it? If yes to the transaction, are there simple examples to explain how to set one up, I tried looking through the examples but its not super clear how to best setup a transaction for dispatching.

EditorView.domEventHandlers({
  blur: (event, view: EditorView) => {
    closeCompletion.apply(view)
  }
}),

Cannot read properties of undefined (reading ‘state’) at EditorView.closeCompletion at Object.blur

7

I’ve tagged @codemirror/view 0.20.4.

Just call it. closeCompletion(view).