Forge UI Kit - User picker bug - doesn't update display on second user added with isMulti=true

Hi there,

I’ve found what looks to me like a bug in the user picker. When my code adds a second user then this isn’t reflected in the set of users displayed in the user picker.

Here’s how to trigger it.

Near the start of the definition of the app’s UI:

const [userIds, setUserIds] = useState([]);

Then add the user picker UI:

<UserPicker
  defaultValue={userIds}
  isMulti={true}
  onChange={(users) => {
    setUserIds(users ? users.map(({id}) => id) : []);
  }}
/>

Then add a button that adds a user to the user picker:

<Button onClick={() => setUserIds(userIds.concat("<insert account id here>"))}>
    add person
</Button>

Now use the UI:

  1. Load the app in the browser. Observe that there is nobody displayed in the user picker.
  2. Click the button created above. You’ll see that this one person is now displayed in the user picker.
  3. Empty the user picker. You can do this by reloading the page or clicking the “x” on the user’s lozenge inside the user picker.
  4. Click in the user picker and select a different user. Observe that the user picker now contains one person.
  5. Click the button again. The user picker’s display does not update.

I have other UI components that do update when the value of userIds changes, so I know that it’s just the user picker that is not updating its display.

Is this a bug or something that I’ve done?

-Peter

1 Like

@YuweiShen you helped me out with my last user picker problem. Would you be able to give me (and possibly the community, if it is a bug) a hand here?