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


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

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]":


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…

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.

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.

Hello there @vchan,

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


1 Like

Hello @vchan,

A fix has been released in a new version!

Thank you for bringing this into our attention!


Thank you Matias! Have a great day.

Victor Chan

You too @vchan !