office-ui-fabric

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


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

enter image description here


Solution

  • 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.