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.

[web265p3]

Hello Musale,

Thanks! Nice to know that the reason for my problem seems obvious. I am fine with both approaches. Whatever is easier for you to implement. I would also love to use the latest version, so adding just an additional parameter would be awesome. Can you update the documentation?

[web265p3]

I just saw you closed the issue. I updated to version 4.2.4, but the issue still happens. Also there is no new parameter in the function.

This is the signature of the current version:

/**
 * Queries the microsoft graph for a user based on the user id and adds them to the selectedPeople array
 *
 * @param {readonly string []} an array of user ids to add to selectedPeople
 * @returns {Promise<void>}
 * @memberof MgtPeoplePicker
 */
selectUsersById(userIds) {

///...

}

[Mnickii]

@web265p3 is it still happening in v4.2.5? We realized we did not need to add in a new parameter, we added logic to only open the dropdown when the input is focused, which solved the issue. https://mgt.dev/?path=/story/components-mgt-people-picker-html--select-users-by-id

[web265p3]

I just found version 4.2.4 - probably I need to wait a little:

https://www.npmjs.com/package/@microsoft/mgt

[Mnickii]

@web265p3 you're right, it's not yet available. Seems one of our release jobs got a little stuck, we are working on this and it will be available ASAP

[Mnickii]

@web265p3 should now be available, thank you for your patience!

[web265p3]

Thanks, now it works! Very nice ;)