[BUG] People picker: selectUsersById causes user dropdown to open up

[web265p3]

Describe the bug Whenever I use the function selectUserById of the people picker component, the dropdown to pick a user opens up.

To Reproduce Steps to reproduce the behavior:

1. Create the people picker component. ie:

<mgt-people-picker ngDefaultControl name="people" id="MY_TEST_ID"> </mgt-people-picker>

2. Call the selectUserById function:

(document.getElementById('MY_TEST_ID') as any).selectUsersById(['977c3cbe-e47e-xxxx-b92c-0739ad67ebbe']);

3. The dropdown of the people picker opens, because the focus is caught.

Expected behavior The focus of the element should not be caught automatically just because selectUsersById is called. Usually a programmatical selection does not need additional user action.

Environment

• Browser Edge latest version
• Framework Angular as custom element

Additional context I am using Angular and use the people picker as a custom element.

[web265p3]

Just figured out that this does not happen in older versions. For example in 2.6.2 everything works fine. So this is a bug of the current version 4.2.1

[musale]

I can't quit figure out how you're using this control @web265p3. Please could you explain a little more how you're utilizing it as a custom element?

[web265p3]

@musale Sorry for my late reply. To use the graph toolkit within my Angular application, I followed the steps from this Microsoft article:

After this steps, you can use the people picker within Angular.

The version 4.2.1 always opens the dropdown menu to pick users after calling the function "selectUsersById". This bug did not happen in older versions, so I just reverted my code to version 2.6.2, where the problem did not exist.

[musale]

Oh, I see what you mean @web265p3. The selectUsersById function is calling addPerson method which adds the found user ids and sets focus on the input field. I introduced this behaviour in this PR https://github.com/microsoftgraph/microsoft-graph-toolkit/pull/2792.

What I would suggest is:

• expanding the selectUsersById API to have a focusOnInput argument that is by default true and you can call it with false to avoid the focus.
• an attribute (focus-input) that when set to false, does not focus on the input field. This will affect majority of all other features of the people-picker.

Are these better ways to fix this for you or you have other ideas? v2.x.x is far back I would really want you to use the latest version of MGT too.