Why my Multi users PeoplePicker does not show the users?

[Ofer-Gal]

This pattern works fine with selectionMode={'single'}
But not for multiples . it shows empty when jobOther.AdditionalRecipients array has 2 items with EMail properties.

<span className={'mylabel'}>Additional Recipients</span>
<div >
                            <PeoplePicker placeholder={'Up to 50 people'} selectionMode={'multiple'}
                                id="AdditionalRecipients" 
                                defaultSelectedUserIds={jobOther.AdditionalRecipients.map(r => r.EMail)} //Why Not working?
                                selectionChanged={onAdditionalRecipientsChanged}
                        />
</div>

BTW version is 2.3.1
Using import { PeoplePicker } from '@microsoft/mgt-react/dist/es6/spfx';
but import { PeoplePicker } from '@microsoft/mgt-react'; shows:
"Failed to execute 'define' on 'CustomElementRegistry': the name "mgt-mock-provider" has already been used with this registry"

Where should I import PeoplePicker from?

Thanks

[sebastienlevert]

The defaultSelectedUserIds property expects an array of userId and not the user emails. Can you validate if this is what you are sending? If user a static array of user ids, does it work?

Can you open an issue on our repo instead of this discussion? This would be amazing. Thanks!

[sebastienlevert]

With the ids, were you able to make it work? I wasn't sure! Thanks for confirming so we can close the discussion :)

[Ofer-Gal]

It sure does means yes 😃
so defaultSelectedUserIds ={[[email protected]","[email protected]"] } works
But defaultSelectedUserIds={jobOther.AdditionalRecipients.map(r => r.EMail)} does not work
Is there something I do wrong?

[Ofer-Gal]

I decided to use the graph Ids of the users and got the same results.
If I use
defaultSelectedUserIds ={[ '1d5d7ad1-af0b-499f-9dc3-fdc3fe94b57b', '301b0d96-bcd6-4c9b-836a-dcccb3ba7738' ] }
It shows the persons nice.
But using
defaultSelectedUserIds={graphIds} and 'graphIds' is a state who's value is:
graphIds (2) ['1d5d7ad1-af0b-499f-9dc3-fdc3fe94b57b', '301b0d96-bcd6-4c9b-836a-dcccb3ba7738'] 0: '1d5d7ad1-af0b-499f-9dc3-fdc3fe94b57b' 1: '301b0d96-bcd6-4c9b-836a-dcccb3ba7738' [[Prototype]]: Object length: 2 [[Prototype]]: Array(0)
How do other people fill multiple users PeoplePicker ?
['1d5d7ad1-af0b-499f-9dc3-fdc3fe94b57b', '301b0d96-bcd6-4c9b-836a-dcccb3ba7738'] is not usable in an application.
Thanks

[Ofer-Gal]

Any chance of getting help populating PeoplePicker

<PeoplePicker placeholder={'Up to 50 people'} selectionMode={'multiple'}
	id="AdditionalRecipients" disabled={!dpcRequest.LockedToMe}
	defaultSelectedUserIds={graphIds} //selectedPeople={graphIds}
	showMax={50}
	selectionChanged={onAdditionalRecipientsChanged}
/>

nither selectedPeople nor defaultSelectedUserIds shows users when graphIds is an array of ids from:

const graphIds = await Providers.globalProvider.graph.api(`/users?$filter=mail in (${eMails.map(m => `'${m}'`).join(',')})&$select=id,mail`).get();

Help :-)

[sebastienlevert]

Is it an array that is represented by this variable? It needs to be a simple array, not a collection or enumerable.