[EuiSuggest] Status changes width of text field

[i-a-n]

Hi team. I noticed that when changing the status on an <EuiSuggest> element, typically from "unchanged" to "loading", that the width can change by a fair amount, up to 20 pixels. This causes a serious amount of jank on layouts that are dynamic and not full-width.

Here's a pared-down example where a two-column flexbox layout is disrupted by toggling the loading state on/off. Just type slowly in the text field to toggle the status: https://codesandbox.io/s/optimistic-shadow-rlvq1

This isn't a blocker or anything for me, but I thought I'd bring it up for discussion and further tracking if it's something we want to fix.

[andreadelrio]

@i-a-n thanks for reporting this. I'm trying to pin point the problem. So far, I've reproduced your example with EuiFieldText instead (which EuiSuggest uses behind the scenes) and the same jumping happens. So the problem is probably happening at the EuiFieldText level.

Also, not sure if this is 100% relevant but when building the 2-column layout using EuiFlexGroup and EuiFlexItem the jumping does not ocurr.

[thompsongl]

Fixed in #5157