如何将焦点设置到 Microsoft Graph 工具包人员选取器上？

Question

我试图在呈现人物选择器输入后将焦点设置在它上，但是，我不能使用任何 dom 查询选择器等，因为它在正确的时间并不存在。

没有可用的 tabindex 值，输入是渲染中的多个子节点

{this.state.mentionStatus ? (
  <div className={styles.mentionSearchBox}>
    <PeoplePicker
      selectionChanged={this.addPerson}

      placeholder="Select person."
      showMax={10}
      id="FocusOnMe"
      type={PersonType.any}
    ></PeoplePicker>
  </div>
) : (
  <div></div>
)}

渲染后的代码如下：

<mgt-people-picker id="FocusOnMe" tabindex="2" autofocus="">
    <div dir="ltr" class="people-picker">
        <div class="selected-list">
            <mgt-flyout light-dismiss="" class="flyout">
                <div class="search-box">
                    <input id="people-picker-input" class="search-box__input" type="text" label="people-picker-input" aria-label="people-picker-input" role="input" placeholder="Select person.">
                </div>
                <div slot="flyout" class="flyout-root">
                </div>
            </mgt-flyout>
        </div>
    </div>
</mgt-people-picker>

有谁知道有什么方法可以让用户无需点击就可以直接开始输入吗？

Answer 1

我想通了。

需要获取该元素在呈现时创建的#shadowroot 元素，然后您可以在其子元素上使用 'getlementsbyid' 来定位您需要的输入 - 'people-picker- 输入'.

它需要延迟才能工作。

private delay(ms: number) {
    return new Promise((resolve) => setTimeout(resolve, ms));
}

private async setFocustoPicker() {
    await this.delay(100);
    let elem = document.getElementById("FocusOnMe");
    const shadow = elem.shadowRoot;
    let childInput: HTMLElement = shadow.getElementById("people-picker- 
    input");
    childInput.focus();
}

创建人物选择器时我给了它一个 ID，你永远不知道页面上是否存在另一个 ID

<PeoplePicker
    id="FocusOnMe"
    selectionChanged={this.addPerson}
    placeholder="Select person."
    showMax={10}
    type={PersonType.any}
></PeoplePicker>`

如何将焦点设置到 Microsoft Graph 工具包人员选取器上？

How do you set the focus onto the Microsoft Graph Toolkit People Picker?

microsoft-graph-toolkit