如何在lit-element中聚焦纸张输入

Question

我的页面上有一个<paper-input>元素，我希望在页面加载时选择该元素。我试着在页面第一次更新时聚焦它，但这并不起作用。

firstUpdated() {
    this.shadowRoot.querySelector('#input').focus();
}

The paper-input page建议设置tabindex是input.focus()工作所必需的，所以我也这样做了，但它没有工作。我还尝试了为this SO question推荐的关于聚合物中的paper-input的解决方案，但都没有奏效。

有没有办法在lit-element中聚焦paper-input？

Answer 1

我有一个我正在使用的技巧，我可能不会在生产中使用，但它也许可以作为灵感。

focusDescription() {
    let descriptionElement = this.shadowRoot.getElementById("description") as any
    let descriptionInputElement = descriptionElement.inputElement.children[0]
    descriptionInputElement.inputElement.children[0].focus()
}

Answer 2

使用ref获取对元素的引用，然后使用该引用设置焦点：

inputRef: Ref<PaperInputElement> = createRef();
​
render() {
    return html`<paper-input ${ref(this.inputRef)}></paper-input>`;
}
​
firstUpdated() {
    this.inputRef.value.focus();
}

请注意，如果您使用<paper-dialog>，则聚合物的autofocus将无法工作，因为它依赖于聚合物的阴影DOM填充物并打破对焦捕捉，请参阅https://github.com/PolymerElements/iron-overlay-behavior/issues/282