Support autoFocus attribute in React-wrapped components

[evangrayk]

Feature request

When using react component bindings, the autofocus/autoFocus prop does not work on <VSCodeTextArea> and <VSCodeTextField>.

Expected behavior

React components <VSCodeTextArea> and <VSCodeTextField> should accept an autoFocus prop which causes the components to focus when mounted.

Current behavior

Note: React polyfills the autoFocus attribute on normal input elements so that they can be consistent and work with mounting component beyond just the first page load. It appears this polyfill does not happen when using with VSCodeTextArea and VSCodeTextField.

You can provide autofocus without a typescript warning, and it will add autofocus to the innermost <textarea> of the <vscode-text-area>. However, this doesn't have the intended effect: the text area is not focused when added to the DOM (because the HTML attribute only applies on first page load in most browsers).

It's possible to work around this issue by re-implementing this behavior using react hooks, however it's quite annoying to do so. (This is a separate issue but refs are difficult to use with this library because of the types of components—you have to do an ugly type cast to make it work)

Use case

It's very common to auto-focus text areas and text fields in forms that you want people to fill out. This is a common react idiom, so not having this makes the textarea/textfield components feel like weird bespoke components instead of acting like textareas and textfields that we're used to using.

Screenshots/references

To test this in an isolated environment, I added a <VSCodeTextArea autofocus>Text Area!</VSCodeTextArea> to the vscode-webview-ui-toolkit sample create-react-app project.

When you launch the webview, it does not auto-focus the text area.

[daviddossett]

Thanks for filing, @evangrayk. We'll take a look at this and will report back 👍

[drriguz]

Here's a working example using ref workaround:

function MessageEdit({ index, message }: MessageProps) {
    const [editing, setEditing] = useState(false);
    const textAreaRef = useRef<HTMLInputElement>(null);

    useEffect(() => {
        if (editing && textAreaRef.current) {
            textAreaRef.current.focus();
        }
    }, [editing, textAreaRef.current]);

    if (editing)
        return (
            <div>
                <VSCodeTextArea
                    // @ts-ignore
                    ref={textAreaRef}
                    autoFocus
                    onBlur={() => setEditing(false)}
                    value={message.content || ""}
                />
            </div>
        );
    return <div onClick={() => setEditing(true)}>{message.content}</div>;
}

[hawkticehurst]

Hi all,

I'm very sorry to say that the toolkit is being deprecated and all active development will be coming to a close.

There was an announcement last week where you can learn more details and leave any questions or comments you may have.

Beyond that, thank you so much filing this issue and apologies for never getting around to addressing it. It means a lot that you contributed to the improvement of this project. I wish you all the best in your future VS Code extension endeavors!