EuiComboBox: React warning related to duplicate keys

[alisonelizabeth]

To reproduce, create a EuiComboBox that groups options together, where group 1 has an option with the same label as group 2.

For example:

[
  {
     "label": "Based on your indices/aliases",
     "options": [{"label":"kibana_sample_data_logs", "value":"kibana_sample_data_logs"}]
  },
  {
    "label": "Based on your index patterns",
     "options": [{"label":"kibana_sample_data_logs", "value":"kibana_sample_data_logs"}]
  }
]

It looks like the key is created based on the label, which is causing the following React warning in this scenario: Warning: Encountered two children with the same key

[cchaos]

Unfortunately, this is as designed and a known restriction for EuiComboBox.

A different component (EuiSelectable) uses the same logic and therefore the same restrictions, but there's talk about possibly allowing a unique key to the object.

[alisonelizabeth]

@cchaos thanks for sharing! I will go ahead and close this.

[sebelga]

I reopen the issue as I did not understand why it is not possible to give a unique key to the combo box options. @cchaos

[thompsongl]

#3803 tracks the request to allow id and duplicate label content.

Closing this in favor of that issue and the solution in the linked PR