Unable to select multipe users under Propery Pane People Picker Control

[bhoomesh-spe]

Hello Everyone

I have created the SharePoint Framework web part and saved the data under the property pane.

I have used @pnp/spfx-property-controls(v3.13.0) library to integrate property pane controls in my solution.

I need to integrate People Picker Control which allows multiple selections. But it is not working as expected.

I am unable to select multiple options and Data is not added to the JOSN.

I have tried with different 3 options. Below is the code snippet for the same.

PropertyFieldCollectionData("kudozContentData", {
                  key: "MyContentData",
                  label: "My Content Data",
                  panelHeader: "My Content Data",
                  manageBtnLabel: "Manage My Con
[screen-capture.webm](https://github.com/pnp/sp-dev-fx-property-controls/assets/99523338/9e0387a0-fe9e-41b9-a156-a0f9ed718238)
tent Data",
                  value: this.properties.MyContentData,
                  fields: [
                    {
                      id: "customFieldId",
                      title: "People picker",
                      type: CustomCollectionFieldType.custom,
                      onCustomRender: (
                        field,
                        value,
                        onUpdate,
                        item,
                        itemId,
                        onError
                      ) => {
                        console.log("item", item);
                        console.log("itemId", itemId);

                        return React.createElement(PeoplePicker, {
                          context: this.context as any,
                          personSelectionLimit: 100,
                          showtooltip: true,
                          key: itemId,
                          defaultSelectedUsers: [item.customFieldId],
                          onChange: (items: any = []) => {
                            // first option
                            item.customFieldId = items.map(ele => ele.secondaryText);
                            onUpdate(field.id, items.map(ele => ele.secondaryText));

                            // second option
                            items.map(ele => ele.secondaryText)
                            item.customFieldId = items;
                            onUpdate(field.id, items);

                            // third option:
                            let results = []
                            items.map(ele =>
                              results.push(ele.secondaryText)
                            )
                            let finalResults = {}
                            finalResults["results"] = results;
                            console.log("finalResults", finalResults);
                            item.customFieldId = finalResults;
                            item.customFieldId = finalResults
                            onUpdate(field.id, finalResults);
                          },
                          showHiddenInUI: false,
                          principalTypes: [PrincipalType.User],

                        });
                      },
                    },
                  ]
})

Please check the screen capture video for more details.

Can anyone help me with the same?

Thanks

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[shreyakantesariya]

I found the solution :
PropertyFieldCollectionData("kudozContentData", {
key: "MyContentData",
label: "My Content Data",
panelHeader: "My Content Data",
manageBtnLabel: "Manage My Content Data",
value: this.properties.MyContentData,
fields: [
{
id: "customFieldId",
title: "People picker",
type: CustomCollectionFieldType.custom,
onCustomRender: (
field,
value,
onUpdate,
item,
itemId,
onError
) => {
return React.createElement(PeoplePicker, {
context: this.context as any,
personSelectionLimit: 100,
showtooltip: true,
key: itemId,
defaultSelectedUsers: item.customFieldId,
onChange: (items: any = []) => {
console.log("Items", items);
item.customFieldId = items.map(ele => ele.secondaryText);
onUpdate(field.id, items.map(ele => ele.secondaryText));
},
showHiddenInUI: false,
principalTypes: [PrincipalType.User],

                    });
                  },
                },
              ]

})