#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.

Default multi-select picker in VSCode

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.

New FrontMatter panel in VSCode

Info: You can find the extension on the VSCode marketplace: Front Matter.

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:

• Trigger your panel to open
• 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:

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

Info: Link to my extension file: extension.ts.

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.

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

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

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

  switch (message.command) {
    case "focus":
      const elm = document.querySelector('input');
      elm!.focus();
      break;
  }
});

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

Trigger tag input from command

Happy coding

First published on: https://www.eliostruyf.com/devhack-open-custom-vscode-webview-panel-focus-input/