Hi @CardinalNight,
you can use a custom people picker filter.
To create a custom people picker filter, extend the PeoplePickerFilter class and implement the filterPeople method. The filterPeople method takes an array of people as input and returns an array of people that match the filter criteria.
To filter the people picker by a certain domain, implement the filterPeople method as follows:
import { PeoplePickerFilter } from '@pnp/spfx-controls-react';
class DomainFilter extends PeoplePickerFilter {
constructor(private domain: string) {
super();
}
filterPeople(people: Person[]): Person[] {
return people.filter((person) => person.email.endsWith(this.domain));
}
}
Once you have created your custom people picker filter, you can use it by passing it to the PeoplePicker control's filters prop.
For example:
<PeoplePicker
context={props.context as any}
personSelectionLimit={1}
onChange={props.changeRequestedByHandler}
principalTypes={[PrincipalType.User]}
resolveDelay={1000}
ensureUser={true}
defaultSelectedUsers={props.requestedByEmail.length > 0 ? [props.requestedByEmail] : [props.userEmail]}
filters={[new DomainFilter('@domain.com')]}
/>
This method is the best working solution for filtering the spPnP people picker by a certain domain because it is performant and flexible. It allows you to filter the people picker results without having to make an additional API call to SharePoint.
Please click Mark as Best Response & Like if my post helped you to solve your issue.
This will help others to find the correct solution easily. It also closes the item.
If the post was useful in other ways, please consider giving it Like.
Kindest regards,
Leon Pavesic
(LinkedIn)
