[Controls] Make focus on the selected field when editing a control

[teresaalvarezsoler]

Problem
When users edit an existing control and they have an index with hundreds of fields, it's very difficult to find which field is selected for the control.

Solution
When the user edits a control, make focus on the selected field.

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[Heenawter]

We can't reliably set the focus to and/or scroll to the selected field - the options in the EuiSelectable component are virtualized, which means that (basically) only the visible options are rendered at a specific time. The benefit of this is that the list renders super fast, since it only has to render the HTML for ~10 options and not the entire list - however, it also means that the HTML for the selected field is not necessarily present on the screen yet, which means we can't force focus or scroll to it.

An alternative would be to bring the selected field to the top of the list (only on the first load - selecting a new field would not rearrange the list), much like we are doing for the navigation embeddable - would this be okay?

[teresaalvarezsoler]

Thanks for the context @Heenawter

bring the selected field to the top of the list

This will work!

selecting a new field would not rearrange the list

Do you mean the previous selected field will remain at the top? That is ok. However, if I select a new field, close the editing flyout and open it again, the new field will appear on the top right? While the former selected field will appear in its natural position.

[Heenawter]

Do you mean the previous selected field will remain at the top? That is ok. However, if I select a new field, close the editing flyout and open it again, the new field will appear on the top right? While the former selected field will appear in its natural position.

That is correct! :)