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],

                    });
                  },
                },
              ]

})