Controlled People Picker, accepting null for selectedPeople?

[tabit01]

I am trying to add a controlled People Picker component to a SPFx solution. There are two basic scenarios:

1. There is no Graph User at initialization. The SPFx user then selects a new User from the list
2. There exists a Graph User to populate the People Picker. The SPFx user could remove the existing selected User, and select a user from the Graph list

The eventual Graph User is fetched in useEffect in the component, and set as selectedUser state variable.

<PeoplePicker
  selectedPeople={[selectedUser]}
  selectionChanged={(e: any) => {
    console.log("selection changed", e.detail[0]);
    props.updateItem({
      [Column.User]: e.detail[0]
        ? e.detail[0].displayName
        : null,
    });
  }}
></PeoplePicker>

I would simply like the People Picker to accept null values, either when there is no Graph User to populate the control, or when I remove the existing user by hitting x in the picker. The default-selected-user-ids does not really fit the scenario. How can I fix this?

Right now, this error is thrown when there is null user passed to the control:

mgt-library_febbf67f6ed3babd0eee.js:1732  Uncaught (in promise) TypeError: Cannot read properties of null (reading 'id')
    at mgt-library_febbf67f6ed3babd0eee.js:1732:81
    at Array.map (<anonymous>)
    at xf.renderSelectedPeople (mgt-library_febbf67f6ed3babd0eee.js:1729:32)
    at xf.render (mgt-library_febbf67f6ed3babd0eee.js:1697:4545)
    at xf.update (mgt-library_febbf67f6ed3babd0eee.js:2:90680)
    at xf.update (mgt-library_febbf67f6ed3babd0eee.js:2:101662)
    at xf.performUpdate (mgt-library_febbf67f6ed3babd0eee.js:2:87544)
    at xf._enqueueUpdate (mgt-library_febbf67f6ed3babd0eee.js:2:87196)

and the relevant line is seen here (e.id)

       <ul
        id="selected-list"
        aria-label="${this.strings.selected}"
        class="selected-list"
        >${e.slice(0, e.length).map(e=>Ve`
             <li
             class="selected-list__person-wrapper">
               ${this.renderTemplate("selected-person", {
                        person: e
                    }, `selected-${e.id ? e.id : e.displayName}`) || this.renderSelectedPerson(e)}

               <div class="selected-list__person-wrapper__overflow">
                 <div class="selected-list__person-wrapper__overflow__gradient"></div>
                 <div
                   tabindex="0"
                   role="button"
                   aria-label="${this.strings.removeSelectedItem} ${e.displayName}"
                   class="selected-list__person-wrapper__overflow__close-icon"
                   @click="${t=>this.removePerson(e, t)}"
                   @keydown="${t=>this.handleRemovePersonKeyDown(e, t)}"
                 >
                   \uE711
                 </div>
               </div>
              </li>
           `)}</ul>

Also error from removing the selected User:

mgt-library_febbf67f6ed3babd0eee.js:1812  Uncaught TypeError: Cannot read properties of null (reading 'id')
    at mgt-library_febbf67f6ed3babd0eee.js:1812:4848
    at Array.filter (<anonymous>)
    at xf.removePerson (mgt-library_febbf67f6ed3babd0eee.js:1812:4785)
    at xf.<anonymous> (mgt-library_febbf67f6ed3babd0eee.js:1741:38)
    at Fe.handleEvent (mgt-library_febbf67f6ed3babd0eee.js:2:79382)
    at Fe.__boundHandleEvent (mgt-library_febbf67f6ed3babd0eee.js:2:78756)

In source code:

  removePerson(e, t) {
      var n;
      t.stopPropagation();
      const a = this.selectedPeople.filter(t=>!e.id && t.displayName ? t.displayName !== e.displayName : t.id !== e.id);
      this.selectedPeople = a,
      this.loadState(),
      this.fireCustomEvent("selectionChanged", this.selectedPeople),
      null === (n = this.input) || void 0 === n || n.focus()
  }

[tabit01]

Just an observation from setting a breakpoint on the line from the error message when trying to remove a selected User:

The t argument seems to be a PointerEvent, is that correct?

[tabit01]

the weird thing is that Cannot read properties of null (reading 'id') is only an error when I have enabled selectedPeople, even though the t argument will never (?) have User attributes like id or displayName, right?

If I disable selectedPeople, and try to remove the selected user, the t argument is the same PointerEvent, but it does not throw.

[tabit01]

Unless I'm doing something silly here, I can't seem to use People Picker as a controlled component. And I was also advised to not use PnP SPFx React package, so I'm not really sure on how to solve this problem without breaking UX.

[sebastienlevert]

So your scenario is either empty or there is a selection (of a single user).

The default-selected-user-ids seem to be the right option to initialize the control with a list of controlled items. Other option would be to use an empty array vs. a null on the selectedPeople property. Can you confirm one of this could fix your issue?

[tabit01]

I tried several combinations of selectedPeople and default selected IDs, but got either no persistence, or the default user was "stuck", that is I was not able to "unselect" the default choice.

I ended up rewriting the UI, displaying the selected person in a separate text field. The only thing I did not try was to initialize selectedPeople with perhaps a conditional operator, defaulting to an empty arry, as you suggest. I will try that on the next crossroad, thanks.

[sebastienlevert]

Keep us posted!

[gavinbarron]

As it stands the selectedPeople cannot be null or undefined, if changing this behavior is something that would help you, we do accept pull requests.