People picker selection disappears

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

Please specify what version of the library you are using: [3.9.0 + spfx 1.15 ]

Expected / Desired Behavior / Question

Using the PeoplePicker component should be controllable (mean getting and settings values from the state).

Observed Behavior

The people picker allows gettings its value from the state, and trigger changes with the new selection. However, the text input is cleared after a very small delay, even if the state actually contains the correct value

Steps to Reproduce

Bootstrap a new spfx webpart project using standard yeoman generator (choose webpart and react framework) Replace the HelloWorld component with :

import { BaseComponentContext } from '@microsoft/sp-component-base';
import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";
import { Label, Stack } from 'office-ui-fabric-react';
import * as React from 'react';

export interface helloWorldProps {
  context: BaseComponentContext
}

export const HelloWorld = ({ context }: helloWorldProps): JSX.Element => {

  const [selectedUserId, setSelectUserId] = React.useState<string[]>([]);

  return (
    <Stack>
      <PeoplePicker
        context={context}
        defaultSelectedUsers={selectedUserId}
        titleText="People Picker"
        personSelectionLimit={3}
        showtooltip={true}
        required={true}

        onChange={(items) => {
          setSelectUserId(items.map(item => item.id));
        }}

        principalTypes={[PrincipalType.User]}
 />

      <Label>Selected ({selectedUserId.length})</Label>
      <ul>
        {selectedUserId.map(user => (
          <li key={user}>{user}</li>
        ))}
        
      </ul>
    </Stack>
  );

}

In the HelloworldWebPart.tsx file, change the render method to :

  public render(): void {
    const element: React.ReactElement<helloWorldProps> = React.createElement(
      HelloWorld,
      {
        context : this.context
      }
    );

    ReactDom.render(element, this.domElement);
  }

Drop the webpart on any client side page

Reproduction : https://github.com/stevebeauge/spfx-react-control-sandbox/tree/repro/issue%231265

[omarelanis]

@stevebeauge happened to come across this issue you raised, it’s the same problem you have in the taxonomy bug you raised, you should not be updating the default or initial values otherwise it will stop the components from working correctly, so in your first code this line:

    defaultSelectedUsers={selectedUserId}

should be a constant value that never changes, you however are updating it in the onChange method using the setState, the onChange method should only be used to store the value in a separate state item which is not linked back to the control, the people picker control will handle the selected values itself.

I.e

PnPControl state -> your component state, not the other way around

You will find this is a common theme with the PnP control so avoid trying to update any readonly properties within the controls

[joelfmrodrigues]

@stevebeauge I see your point, but unfortunately the control can not be fully controlled. I will close this bug based on the response from @omarelanis, but if you are willing to update the component to be fully controlled, we would be happy to review the PR 🙂