以編程方式在 Figma 插件中設置焦點

Question

我想知道如何將瀏覽器的焦點設置到 Figma 插件的打開插件 window 中。 我在這個插件中運行 React。

到目前為止嘗試了不同的方法，但有誰知道如何以正確的方式做到這一點？

對於上下文：我想對鍵盤輸入做出反應，並且不希望用戶首先必須單擊插件 window 才能使鍵盤輸入起作用。 沒有涉及輸入元素，因為我想獲取快捷鍵的鍵盤事件。

提前致謝！！

Answer 1

我不得不解決一個類似的問題，並注意到“Iconify”插件確實做到了這一點。

如果您在 React 中，您可能可以使用useRef和useEffect(() => inputRef.focus())來完成這項工作。

你可以在這里看到它在 Svelte 中的完成方式。 但類似的規則適用於 React 或其他 UI 框架。

    // 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