0

We are using PeoplePicker in the Teams Personal Tab, we are able to trigger onChange event in the Desktop and browser but not in the Teams Mobile App. We are rendering the PeoplePicker in a Modal component (All are Fluent UI react components).

MaheSH YU
  • 27
  • 6
  • Could you please share the sample code or docs that you are following, so that we can test it from our end? – Nivedipa-MSFT Feb 08 '22 at 12:59
  • Below is the code snippet Event-- const onChangePeople=(e:any) =>{ const data=e.detail; setUsersSelected( data.map(function (item: any) { return { key: item.id, name: item.displayName, email: item.imAddresses[0] }; }) ); console.log(usersSelected); }React.useEffect(() => { if(userSelected.length>=1){ setSaveButton(false); } else{ setSaveButton(true); } }, [usersSelected]); – MaheSH YU Feb 09 '22 at 07:18
  • This is working in the desktop screen but not in the mobile devices – MaheSH YU Feb 09 '22 at 07:19

1 Answers1

2

I tried the PeoplePicker selectionChanged event inside Teams IOS mobile client and it works fine.

Here is code snippet:

const handleInputChange = (e) => {
  this.setState({
    selectedPeople: e.target.selectedPeople
  });
  ...
}

...
<div className="people-picker-area">
      <PeoplePicker selectionChanged={handleInputChange} placeholder="Typing name to select people to view contact info"></PeoplePicker>
</div>

We have a sample project which is using PeoplePicker inside teams Tab Project you can refer here:

https://github.com/OfficeDev/TeamsFx-Samples/tree/v2/graph-toolkit-contact-exporter

Simply install teams toolkit extension in your VSCode, open the sample project, and then click F5 button, you can preview this sample.

If you want to try this sample inside mobile client, just run provision, and deploy command, then you can access this sample project in your mobile client.

SLdragon
  • 1,477
  • 16
  • 19