[Security Solution] Timeline template selector rendering issues

[banderror]

Summary

The timeline template selector has some issues with rendering. It's a reusable <PickTimeline> component used in the rule creation/editing forms, bulk applying timeline template form, etc.

Responsiveness

It doesn't look good on a smaller screen:

Focus

Its focus state seems off and doesn't match the combo box focus state from EUI here (it's especially noticeable in Dark Mode).

Within bulk apply timeline template flyout:

Within Edit Rules (also notice how it re-open after selection....weird):

Clicking on "favorite star"

If you click the "favorite star" when selecting the first component it can't be reselected until focus is lost:

Search bar placeholder text

It's not fully visible, and we should either make it shorter or truncate with ellipsis like we do in other parts of the UI:

Other issues with this component

• [Security Solution] [Bug] Only favorites template not selected instead non favorites template selected if non favorites and only favorites templates have same name #130366
• [Security Solution] Long full name and description of the Timeline Template is not shown on the Templates drop-down on 'Apply Timeline template' flyout  #131614

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[elasticmachine]

Pinging @elastic/security-detections-response (Team:Detections and Resp)

[yiyangliu9286]

Hi @banderror, thanks for providing the screenshot for UIs and interactions. This looks great.
There's only a small design fix that I'd suggest if we could update the default text in the search bar under "Apply Timeline template to selected rules" to be overflow "..." instead texts being cut off, that would be great.

[vitaliidm]

Search bar placeholder text
It's not fully visible, and we should either make it shorter or truncate with ellipsis like we do in other parts of the UI:

When input is in focus(which is almost always a true for our case, because even when users navigate through options with arrow buttons, input still in focus), placeholder is not getting trimmed with ellipsis. Here is some details on that on stackoverflow.

Moreover, given that the width of input won't change at all, because it displayed in short width flyout in EuiFormRow of fixed width(400px, https://elastic.github.io/eui/#/forms/form-layouts), user won't be able ever to read the whole description. I would suggest to keep it as short as possible to mitigate this:
Let's say instead of "Apply Timeline template to selected rules", which will be trimmed, let's use ""Apply Timeline template" or "Search Timeline template"(would vote for this one, as there are already "Apple Timeline .." on the form(as select label and form title)

Here is, how it will be displayed on a screen:

Same might go for edit/create rule screen as well. Any suggestions on that?

cc: @yiyangliu9286, @banderror

[vitaliidm]

issues are addressed in #135907

But overall feeling after working on this component: we should consider replacing it with https://elastic.github.io/eui/#/forms/combo-box.
I haven't researched if it possible and what was the reasoning behind not using it but rather create a separate component, but it certainly worth to discuss