Set focus in Figma plugin programmatically

Question

I'm wondering on how to set the focus of the browser into the opened plugin window of a Figma plugin. I'm running React in this plugin.

Tried different approaches so far but does anyone know on how to do it the right way?

For context: I want to react on keyboard inputs and don't want the user first have to click into the plugin window for the keyboard inputs to work. There is no input element involved as I want to get the keyboard events for shortcuts.

Thanks in advance!!

Answer 1

I had to solve a similar problem, and noticed that the "Iconify" plugin does do this.

If you're in React, you can probably get this done with a useRef and a useEffect(() => inputRef.focus()).

You can see the way it was done in Svelte, here. But similar rules apply for React or other UI framework.

    // Focus
    let inputRef: HTMLElement;
    let mounted = false;
    onMount(() => {
        mounted = true;
        if (autofocus) {
            inputRef.focus();
        }
    });

</script>
...

        <input
            type="text"
            title={title ? title : placeholder}
            bind:value
            on:input={handleInput}
            on:blur={handleBlur}
            spellcheck={false}
            autocomplete="off"
            autocorrect="off"
            autocapitalize="off"
            inputmode={type === 'number' ? 'decimal' : 'text'}
            {disabled}
            bind:this={inputRef} />

https://github.com/iconify/iconify-figma/blob/cf9362ea53a30ff1e023bba9bb6dadcd4af6067e/src/icon-finder/components/ui/Input.svelte#L104-L112