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.
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
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
You can use the following snippet to include it in your extension:
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.
In the WebView, where you listen to all these incoming messages, you create the focus listener.
Once you have these two things in place, you can do something similar to this: