fix unified search for long field inputs

[timductive]

Summary

Fixes #166019

Checklist

Delete any items that are not applicable to this PR.

• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[timductive]

@andreadelrio looking for your thoughts here for expanding the input fields for long field names.

[andreadelrio]

@timductive Thanks for putting this together! We actually explored this route back in December but I didn’t make a formal proposal because I wasn’t convinced the layout shifts worked well. I understand this is still a UX debt. I'm sharing some of those explorations here to give you context which might be useful as we try to solve this.

[Background] Exploration done in code by one of our contractors

Con: It completely hid the values in the two fields not in focus

[Background] Exploration in Figma

This exploration also hid the buttons (Delete | OR | AND) when one input was in focus state. This generated a bigger difference between the two UI states (1) when an input has focus, buttons were hidden and (2) when no input has focus, buttons were shown. I think its better to try to minimize the differences between the two UI states as much as possible.

Going back to your proposal, is it possible to automatically remove focus on an input after a user has made their selection (whenever the input only allows for single selection)? This would make the transition between the two states smoother like so:

[timductive]

Thanks @andreadelrio I didn't realize we had so much prior research. I also played with how much to hide and show and landed on the same outcome as you, to try and minimize how much the layout shifts and leave the other values as visible as possible.

I also considered if we could auto-blur the input after selection and I agree that would minimize the stutter and shift for the user. I'm sure it is possible, although I'm less sure if that would require a new prop on the EUI side. I can experiment with that a bit tomorrow and see if we can add in that behavior.

[nickofthyme]

So since you forced me to look at this code I had to fix some things that were bothering me.

First was just come cleanup of naming, types and react code - 3963550.

Secondly, this input is a single selection, yet once you select the input remains focused. I think this is an issue/feature enhancement for the EuiComboBox on their side. Should be simple for an explicit prop or even automatic for single selection mode. But I forced this in d20ef3e but it only applies to the first field selection and not the third filter input box to select the value. This could and should be added like the first one, I can do that tomorrow if you want but there are a few components to apply that behavior to.

Just saw I was not the first to see this as an issue/improvement.

The last part is the animation of the width change, I think doing so extraFast is quick enough to occur before the options list appears, any slower and the list will flicker to the full width. See 6155757.

All in all the final result looks something like...

You welcome to revert any changes and sorry for pushing to your branch 🙂

[nickofthyme]

Added blur on single select for phrase values on the third filter input in e8895bf. I'll create an issue in EUI tomorrow to add this as a feature on the EuiComboBox.

[timductive]

Thanks @nickofthyme I am grateful for all contributions 🙇 I will test it out later this afternoon. I noticed when I tried applying animations that the truncatedlabel seemed to calculate the width of the label inconsistently while the animation was occurring but I didn't try it at extra fast. All of the other typescript cleanups are great and I appreciate the example for passing the ref, I was trying to figure that out yesterday.

[stratoula]

I find it very cool tbh and def an improvement in comparison with the current state.

@andreadelrio do you want to take a look? I feel that it works pretty well.

[timductive]

The blur works really well. It looks like the animation is still causing label truncation issues though. I would propose we take the animation back out.

Then it seems ready to merge to me.

Here it is without the animation:

So slightly choppier doing the grow/shrink but the truncation is much more stable.

[andreadelrio]

I think this is a solid improvement given all the constraints we have. While testing I noticed that we don't show the Preview unless the user has chosen an operator. Can we change this? I think it's important to do so particularly when super long field names get truncated in the input.

[timductive]

I think this is a solid improvement given all the constraints we have. While testing I noticed that we don't show the Preview unless the user has chosen an operator. Can we change this? I think it's important to do so particularly when super long field names get truncated in the input.

This is harder than it seems as the preview is doing a lot of logic to build a full filter semantically. I think we can do this but maybe move it to a separate PR, maybe take it on with the updated design for the Preview together.

[andreadelrio]

Design changes LGTM. Thanks for the improvements!

[stratoula]

Changes LGTM, as I said above is a significant improvement from the current experience

[kibana-ci]

💚 Build Succeeded

• Buildkite Build
• Commit: bc20d01

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
unifiedSearch	214.8KB	215.2KB	+396.0B

History

• 💚 Build #157827 succeeded 2be4ba0
• 💔 Build #157747 failed ab6a537
• 💔 Build #157728 failed 83ea902
• 💚 Build #157614 succeeded 196f68a
• 💔 Build #157492 failed 547a851
• 💔 Build #157480 failed dcd3f37

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream