Method of programmatically applying focus to text field in react

[tomqwpl]

Feature request

I suspect I'm being a bit dim here as this seems such an obvious requirement. There doesn't seem to be any method of programmatically applying focus to a text field when using React and vscode-webview-ui-toolkit. The components generally don't seem to support react "refs", so I can't get a ref to the underlying component, and there seems to be no other method that I can find.

Expected behavior

Either support "ref" on VSCodeTextField and forward it down to the tag, or support focus() method on the VSCodeTextField and have that apply focus to the relevant tag.

Current behavior

No apparent way to control focus at all that I can find.

Use case

For example, look at the VSCode settings editor. The "Unicode Highlighting: Allowed Characters" table for example:

When you press "Add Item" it creates two entry fields and puts focus in one of them.
There's no apparent way of implementing something like that using this toolkit and react that I can find. So I don't appear to be able to implement something using this toolkit in a webview that follows the look and feel and behaviour exhibited by standard parts of VSCode.

Screenshots/references

[snoop244]

It would be great to see this enhancement as I'm also looking to set focus programmatically.

[sketchbuch]

In my webview, I can set focus on an input just by calling focus(). Maybe as it is not working using refs, you could just get the field by id and focus it as a work around for now. This is basically what I do as I'm just using string literals for templating rather than using something like react.