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

Question

I'm trying to set the focus on the people picker input once it is rendered, however, I cannot use any dom query selectors etc as it doesn't really exist at the right time.

There is no tabindex value that works and the input is severla children deep in the rendered

{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>
)}

The rendered code as follows:

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

Does anyone know of any method to allow the user to just start typing without having to click into it?

Answer 1

I figured it out.

The #shadowroot element that the element creates when it renders, needs to be fetched, and then you can use the 'getlementsbyid' on its children to target the input you need - 'people-picker- input'.

A delay is needed for it to work.

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();
}

When creating the peoplepicker I gave it an ID, you never know if another might exist on the page

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