TSVB Keyboard Navigation

[flash1293]

Keyboard navigation doesn't work correctly in the forms of TSVB. The ComBoxes capture focus if you navigate the form by keyboard. Also arrow buttons don't work for selecting displayed options.

Related small UI issue - Comboxes display the current selection as a tab which makes it look like the user can add multiple values even though only one is possible (behaves like a select with text autocompletion). The aggregation selection looks correct (all should look like this IMHO).

Aggregation selection looks like you cant only select one value

Group by looks like multiple values are possible even though only one can be entered at a time

[elasticmachine]

Pinging @elastic/kibana-app

[flash1293]

I looked into the code and it looks like this isn't fixable easily. A combobox captures focus automatically if an option is selected, but if used as a single selection input field, there is always a selected item which means the focus is always captured.

An alternative would be using SuperSelect in these places instead, but that comes with the disadvantage of loosing the type-ahead functionality.

Ping @cchaos

[cchaos]

The big problem I'm seeing consistently is the overuse of the EuiComboBox for the reason you stated, the typeahead/search. I tried adding a singleSelection={asPlainText: true} prop so that it doesn't look like you can add more options, but the prop is rarely used and when it is used, there's still issues with it on the implementation side.

Likely, the EuiComboBox may need to be generalized even more so it works in all use cases.

I'd suggest creating an EUI issue for the keyboard issue you've found though.

[flash1293]

here's still issues with it on the implementation side.

What issues are you referring to? Does it still make sense to add singleSelection={{asPlainText: true}} to all the comboboxes in TSVB?

[cchaos]

The single selection doesn't behave well when trying to replace the current select:

But, it's probably better than the pills?

[flash1293]

I would say it's better, I will open a PR for this. The focus issue is already addressed here elastic/eui#1576 and should be fixed soon.

[flash1293]

The fix regarding the focus issue got merged and is deployed in Kibana, closing this issue.