Fluent/Fabric - Is it possible to clear the input of the NormalPeoplePicker programmatically?

Question

Is it possible to clear the input text (e.g. "qweqweqweqwe" in the example below) of the (Fluent/Fabric) NormalPeoplePicker programmatically?

I have tried accessing the input element (via the onBlur event) and attempted to change it's value and innerHtml but that doesn't work. Also, that doesn't seem to be a good way of doing it.

https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker

Answer 1

NormalPeoplePicker Component keep input value inside state and its not possible to change it directly:

const picker = React.useRef(null)

...

<NormalPeoplePicker
  ...
  onBlur={() => {
    if(picker.current) {
      picker.current.input.current.value = ""; // Uncaught TypeError: Cannot set property value of #<Autofill> which has only a getter
    }
  }}
/>

From Official Documentation inside implementation section there is useful method updateValue which allows to change the input value.

const picker = React.useRef(null)
...

<NormalPeoplePicker
  ...
  onBlur={() => {
    if(picker.current) {
      picker.current.input.current._updateValue("");
    }
  }}
/>

Codepen working example ln: 104.

Note:

This is a temporary solution, test every use case before production.

Answer 2

let orgSelected: ITag[] = [];
orgSelected.push({key:0 name:''});
const [selectedOrg,setselectedOrg] = useState(orgSelected);
On TagPicker Property just assign the statevalue like this.
selectedItems={selectedOrg}

This way the tagpicker property will always be selected with an empty item.