Eui: [EuiSuperSelect] Dropdown not rendering properly

[miukimiu]

I noticed that when we open the EuiSuperSelect and components that reuse this component, in CodeSandBox or with Create React App the dropdown doesn't render properly. It moves 16px to the right:

Example:
https://codesandbox.io/s/example-31jfn

[cchaos]

Ahh, I know why. It's because it's using the popover service which restricts the popover from getting 16px or close to the window edge. I'd have to check if EuiSuperSelect is using the input popover or not and if so, maybe the input popover needs to be able to negate this "buffer" and always maintain it's position against the input.

cc @thompsongl

[thompsongl]

EuiSuperSelect does not use EuiInputPopover, just the standard EuiPopover service. Passing a buffer of 0 should be enough.

[cchaos]

We should probably get it to use the Input one anyway? Seems most appropriate usage.

[shrey]

Can I work on this one?

[snide]

@shrey go for it, you're on a roll.

[shrey]

@snide Thanks :) btw, How do I check if the changes actually work? because on changing it through the console, it seems fine

[miukimiu]

Hi @shrey,

As @cchaos described this issue happens when the EuiSuperSelect is close to a window edge. A way to test is to put the EuiSuperSelect close to the browser window edge. For example on the top left corner with a fixed position.

To do that you can edit the eui/src-docs/src/views/super_select/super_select_basic.js and add a wrapper around the EuiSuperSelect:

<div style={{ position: 'fixed', top: 0, left: 0, width: 400 }}>
  <EuiSuperSelect
    options={options}
    valueOfSelected={value}
    onChange={value => onChange(value)}
  />
</div>