" Encountered two children with the same key, `[object Object]`" error when using Dropdowns from Vibe Design System

monday Apps & Developers
, , ,
1

Hello,

I’m encountering the following error when utilizing the Multi-Select Dropdown Component from the Vibe Design System.

image
image727×247 10.4 KB

image
image915×80 5.26 KB



I realize that this is error is thrown because when the Dropdown "Chips" are being rendered, they're always given the same id of "[object Object]":

image

Can anyone help me with resolving this? I believe this error is the reason onChange is not called when I remove a “chip” from the Dropdown…

image
image721×137 9.54 KB

For context, here is the code I’m using for the Dropdowns, they’re copied from the documentation:

  let query = "query {teams (ids: team_id)  { users {name id email} } }"
  let res = (await monday.api(query)).data.teams[0].users;
  
  for (let i =0; i < res.length; i++) {
    users.push({ key: res[i].id, value: res[i], label: res[i].name})
  }
...
const teamOptions = useMemo(() => users, []);
...
<Dropdown defaultValue={formState.team} options={teamOptions} multi multiline className="dropdown-stories-styles_with-chips" onChange={(e) => console.log(e)}/>

Thank you.

2

Never mind, I resolve the error, however onChange is still not called whenever I delete a chip. I’ve tested it as well using the exact same code from the Vibe Design System documentation and I get the same results. Could anything be done about this? Thank you.

3

Hello there @vchan,

I will check that with the team in charge of Vibe and let you know!

Cheers,
Matias

1 Like
5

Hello @vchan,

A fix has been released in a new version!

Thank you for bringing this into our attention!

Cheers,
Matias

6

Thank you Matias! Have a great day.

Best,
Victor Chan

7

You too @vchan !