How to clear the MGT PeoplePicker in react hooks SPFx web part?

Question

I need to clear the the PeoplePicker after use.

<PeoplePicker
  selectedPeople={addedMembers}
  selectionMode={"multiple"}
  show-max={50}
  selectionChanged={onPeoplePickerChanged}
/>;

So I set addedMembers to [] but it does not work.

I saw an answer involving ref here but it uses a class and I only know hooks. Anyone can help?

Thank you

I suspect we have a rendering bug here, https://stackblitz.com/edit/react-ts-x1xlm7?file=App.tsx This stackblitz shows the array being cleared but the rendered display of selected users only updates to be cleared visually when you focus to the input box again. — GavinB, Mar 13 '23 at 16:35
I tried to implement the ref logic with hooks https://stackblitz.com/edit/react-ts-zayywf?file=App.tsx but it does not work. So @GavinB you thing I should report a bug to MGT? — Ofer Gal, Mar 14 '23 at 07:18
I think I got a solution: see https://stackblitz.com/edit/react-ts-zayywf?file=App.tsx — Ofer Gal, Mar 14 '23 at 07:42
If you could add an issue it would be helpful. Using a ref to set focus and trigger that behavior is a clever workaround, but it's definitely a bug in our implementation. — GavinB, Mar 16 '23 at 04:08

score 1 · Answer 1 · answered Mar 14 '23 at 07:46

make a ref const ppl = React.useRef(null);

add to the <PeoplePicker ref={ppl}

then when you want to clear set the selectedPeople to [] and run ppl.current.focus();

Hope it helps others

1 Answers1