1

I am using the People Picker control in my SPFx web part.

I want to clear the value of this control on the button click.

as mentioned in the comments here, I tried to set the value of defaultSelectedUsers property to an empty array but still, I am not able to clear the people picker.

How can I achieve the above behavior?

2
  • It should work something like this: private clearPeoplePicker() { this.setState({ selectedtUsers:[] }) } any error that you are facing ? This assumes that you store the selected users in the selectedtUsers in the state and pass it to the component May 5, 2020 at 15:00
  • @GautamSheth I already tried the same but it is not working. the state value is set to empty array but the control still holds the selected value May 6, 2020 at 5:28

1 Answer 1

2

Declare a refer to reference the people picker control so you could clear the value.

<PeoplePicker
              context={this.props.context}
              titleText="People Picker"
              personSelectionLimit={3}
              groupName={''}
              showtooltip={false}
              isRequired={false}
              disabled={false}
              selectedItems={this._getPeoplePickerItems}
              defaultSelectedUsers={this.state.PeoplePickerDefaultItems}
              showHiddenInUI={false}
              principalTypes={[PrincipalType.User]}
              resolveDelay={1000}
              ref={c => (this.ppl = c)} 
            />
            <br/>
            <button onClick={() => {this.ppl.state.selectedPersons=[];this.ppl.onChange([]); console.log(this.ppl);/*this.setState({PeoplePickerDefaultItems: []})*/}}>Clear User</button>

Declare a variable in class(component)

protected ppl;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.