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

Forge Forge UI Kit and Custom UI
, ,
1

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
2

@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?

1 Like
3

Hey @PeterBrownlow1,

I did replicate the behaviour with your code. I got steps 1-5 working by ensuring that the userId passed into defaultValue is a single string, though does not work if you’ve previously selected other users and wish to append a user (i.e skipping step 3):

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

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

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

It is buggy that defaultValue doesn’t follow the standard re-rendering following a setState. I have created a bug ticket to look into this further. I do suspect that defaultValue is only set the first time the app loads, and does not affect the actual value of the userPicker during component re-renders.

However, I would like to note that it is not the ideal use-case for UserPicker to be updating through another component; it is more ideal to use User or UserGroup if you wish to update a list/group of users through another component.

Let me know if the workarounds are sufficient, and I will update you when I find out more about defaultValue.

Cheers,
Yuwei

2 Likes
4

Thanks @YuweiShen . I am going to try to rethink my UI so that I can display all of the previously selected users with a UserGroup but select them with a UserPicker.

The UserPicker could do this using a smaller amount of screen space, if it were to update properly, and I’m still trying to figure out how to do this with 2 elements. :slight_smile:

Do you have a public issue link for the bug that you can share?

2 Likes