How to filter a spPnP people picker

Hi CardinalNight,

The code I provided in my previous response was for version 4.0.0 of the @pnp/spfx-controls-react library.

The onResolveSuggestions prop was introduced in version 4.0.0 of the library, and the PeoplePickerFilter class was introduced in version 3.0.0 of the library.

If you are using a version of the library that is older than 4.0.0, you will not be able to use the onResolveSuggestions prop or the PeoplePickerFilter class.

To filter a PeoplePicker by a certain domain using an older version of the library, you can use the following code:

import { PeoplePicker, PrincipalType } from '@pnp/spfx-controls-react';

class YourComponent extends React.Component {
  constructor(props) {
    super(props);

    this.filterPeople = this.filterPeople.bind(this);
  }

  render() {
    return (
      <PeoplePicker
        context={this.context}
        personSelectionLimit={1}
        principalTypes={[PrincipalType.User]}
        resolveDelay={1000}
        ensureUser={true}
        defaultSelectedUsers={[]}
        onChange={(items) => this.handlePeoplePickerChange(items)}
      >
        <PeoplePickerFilter>
          {(filterText, currentPersonas) => this.filterPeople(filterText, currentPersonas)}
        </PeoplePickerFilter>
      </PeoplePicker>
    );
  }

  handlePeoplePickerChange(items) {
    // Handle the selected items here
  }

  filterPeople(filterText, currentPersonas) {
    // Implement your custom filtering logic here
    // You can use the filterText and currentPersonas to filter the results
    // Return an array of the filtered results
    const filteredResults = currentPersonas.filter((persona) => {
      const domain = '@domain.com';
      return persona.email.endsWith(domain);
    });
    return filteredResults;
  }
}

This code will filter the people picker results to only include users whose email addresses end in @domain.com.