As the title states I am trying to use the PropertyFieldCollectionData in my SPFx Property Pane. But when I run the code and try to search in the peoplepicker nothing shows up, not even myself.
Don't know if it would be of any help but here is the imports as well
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
IPropertyPaneConfiguration,
IPropertyPaneDropdownOption,
PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart, WebPartContext } from '@microsoft/sp-webpart-base';
import * as strings from 'FaqProjectWebPartStrings';
import FaqProject from './components/FaqProject';
import { IFaqProjectProps } from './components/FaqProject';
import { PropertyFieldListPicker, PropertyFieldListPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker';
import { IPropertyFieldGroupOrPerson, PropertyFieldDropdownWithCallout, PropertyFieldPeoplePicker } from '@pnp/spfx-property-controls';
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader';
import { PropertyFieldToggleWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldToggleWithCallout';
import { PropertyFieldCollectionData, CustomCollectionFieldType } from '@pnp/spfx-property-controls/lib/PropertyFieldCollectionData';
import { PeoplePicker, PrincipalType } from '@pnp/spfx-controls-react/lib/PeoplePicker';
Sample code in my FaqProjectWebPart.ts
PropertyFieldCollectionData("collectionData", {
key: "collectionData",
label: "Collection data",
panelHeader: "Collection data panel header",
manageBtnLabel: "Manage collection data",
value: this.properties.collectionData,
fields: [
{
id: "Title",
title: "Name",
type: CustomCollectionFieldType.string,
required: true
},
{
id: "Group",
title: "Choose a group",
type: CustomCollectionFieldType.custom,
onCustomRender: (field, value, onUpdate, item, itemId, onError) => {
return (
React.createElement(PeoplePicker, {
context: this.context as any ,
personSelectionLimit: 1,
showtooltip: true,
key: itemId,
defaultSelectedUsers: [item.customFieldId],
onChange: (items: any[]) => {
console.log("Items", items);
item.customFieldId = items[0].secondaryText;
onUpdate(field.id, items[0].secondaryText);
},
showHiddenInUI: false,
principalTypes: [PrincipalType.User]
})
)
},
},
],
disabled: false
}),
Props
export interface IFaqProjectWebPartProps {
description: string;
faqListId: string;
categoryListId: string;
subCategoryListId: string;
panelViewToggle: boolean;
people: IPropertyFieldGroupOrPerson[];
collectionData: any[];
}
There appears to be a bug in version 3.10 of the spfx-controls-react library (to be fixed in 3.11) that is causing this behavior. For the workaround it's possible to rollback to 3.9