#DevHack: Open custom VSCode WebView panel and focus input

For the last two weeks, I have been working on my FrontMatter extension for Visual Studio Code. This extension helps others and myself make it easier to manage their static markdown pages’ metadata. Some time ago, I received the question to enhance the tag and category experience. As when you have many tags or categories, it is not optimal to use the selectors/pickers VSCode provides you.

Show image

The idea I came up with to improve the experience is to use a custom view panel. From where you can quickly see the SEO recommendations and perform all actions the extension offers. I released this panel functionality in version 1.10.0.

Show image

After releasing it, I got positive feedback and the question if I could make it possible to open the panel and focus on the tag/category input field.

The solution is a two-step process:

1. Trigger your panel to open
2. Post a message to the panel to specify it has to focus on an input

1. Open a panel from your extension

The first step is “easy”, although I was looking at the VSCode API for a long time, which seemed to be the wrong direction. The solution is to use the workbench.view.extension.<your-panel-id> command.

You can use the following snippet to include it in your extension:

1
let insertTags = vscode.commands.registerCommand('frontMatter.insertTags', async () => {
2
  await vscode.commands.executeCommand('workbench.view.extension.frontmatter-explorer');
3
});

2. Posting message to your panel

Step two is to post a message and needs to perform after opening your extension panel. In my extension, I make use of React in my WebView, and this is not a requirement.

First of all, you need to send a message to your panel to let it know you want to set the focus on the input.

1
// Post message from your extension to the WebView
2
this.panel!.webview.postMessage({ command: "focus" });

In the WebView, where you listen to all these incoming messages, you create the focus listener.

1
window.addEventListener('message', event => {
2
  const message = event.data;
3

4
  switch (message.command) {
5
    case "focus":
6
      const elm = document.querySelector('input');
7
      elm!.focus();
8
      break;
9
    }
10
  });

Once you have these two things in place, you can do something similar to this:

Show image

Happy coding