[EuiComboBox] Misaligned options list

[wenchonglee]

Hey,

I recently updated from 30.4.2 to 31.4.0 and noticed the options list of EuiComboBox is misaligned to the left, like so:

It took me a while to replicate this on a codesandbox because it seems that this only happens when certain things are in place.

You can "fix this" by

• removing horizontalPosition="center" from EuiPageContent
• remove a few EuiComboBox, i.e. reducing the height of the page
• reverting to 30.4.2

I'm assuming it was introduced in #4301, since 30.4.2 didn't have this problem.
Should I work around it or is there an underlying issue?

[cchaos]

I think it's more likely that #4301 caused this. That PR moved the vertical scrollbar to a different element which seems that the popover service may have been accounting for. For example:

v. 30.4.2

v. 30.5.0 (very next version)

[wenchonglee]

Hey all,

It's been a while but this issue was blocking me from updating Eui, so I tried to study why this happens.

Unfortunately(?), I couldn't reliably reproduce this problem. A few observations:

• If you open the codesandbox reproduction in a new window, there is no misalignment
• I couldn't reproduce this after forking Eui and pasting the same code in codesandbox in src-docs
• I couldn't reproduce this in the codesandbox; but in my work project, changing the viewport sometimes cause the misalignment to correct itself

---

I then tried reverting the scss changes line by line in #4301 and found that having top: 0 for .euiComboBoxOptionsList solves the issue.

You can try this in the codesandbox I posted, linked here again. Uncomment the import "./test.css" statement to fix the issue.
I didn't create a PR because I don't understand why this solves the issue, it would be helpful if someone could enlighten me and see if this is the correct fix

[chandlerprall]

Took me a while to reproduce at all: only way I can observe the shifting is when the bottom/height of the page is close to but not yet triggering the scrollbar. I believe the popover element added to the bottom of the DOM is triggering the scrollbar, locating the anchor element (which was left-shifted by the scroll bar's appearance), then repositioning the popover to the correct location, removing the scrollbar. Adding top: 0 fixes or avoids by not triggering the scroll bar. This is potentially related to #4382

combobox_offset.mov

[wenchonglee]

I see! The scrollbar being the root cause is very interesting, I would never have thought of that. Digging through #4382, I saw kibana having the same problem as well (elastic/kibana/pull/93274).

I can help submit a PR when I get some free time (likely by tomorrow)