EuiComboBox onChange and options

Elastic Stack Kibana
1

Hi guys,

In my use case, I have a Form with 2 EuiComboBox. Both combo boxes can't have the same fields, but have the same options. So when i change one combo box, the options can't show anymore the selected value previously.
For example:

let options = [{"label": "a"}, {"label": "b"}, "{label": "c"}, {"label": "d"}];
let comboBox_1_fields = [];
let comboBox_2_fields = [];

In combo box 1 I choose label "a", so:

possibleOptions = [{"label": "b"}, "{label": "c"}, {"label": "d"}];
comboBox_1_fields = [{"label": "a"}];
let comboBox_2_fields = [];

Then I choose label b in combo box 2:

possibleOptions = ["{label": "c"}, {"label": "d"}];
comboBox_1_fields = [{"label": "a"}];
let comboBox_2_fields = [{"label": "b"}];

Finally, i remove label a from combo box 1:

possibleOptions = [{"label": "a"}, "{label": "c"}, {"label": "d"}];
comboBox_1_fields = [];
let comboBox_2_fields = [{"label": "b"}];

Can anyone help me with this?

2

Hi @koyassan
I'm not sure I understand correctly your question, but seems a bit more a React/JS question than a Kibana one.
The EuiComboBox works like every other React component, so if keep track of the change using the onChange props you can also update the state of parent component removing the selected option from the possibleOptions array and re-rendering the form with the updated possible options array

3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.