Invisible or shifted option lists in the Select component

[kufelkamil]

Since using Looker Components (a few months), I struggle with unexpected paddings in components having overlays, like option lists in the Select component or tooltips. It significantly affects the user experience as users click on the Select component, and nothing happens, OR the list shows up in a random place - then usually zooming in or zooming out helps to find the opened list.

The issue is present only within the Looker context, so everything works on CodeSandbox and the components.looker.com page.

I have prepared a simplified version of my extension; the code is available on CodeSandbox - https://codesandbox.io/s/looker-select-issue-etkj0

In order to reproduce the issue, please copy the BugDemo.tsx file and use it as <BugDemo /> inside <ExtensionProvider2> component in the Looker extension. I am using Macbook Pro 13", so please shrink the browser window if you have a bigger display.

@looker/components version = 2.7.0 Looker instance version = 21.16.15

[kufelkamil]

Additionally, it looks like there is a bug within the Tab2 component. Due to overflow: auto, the component is truncated from the bottom. It is visible in my CodeSandbox example above, especially after clicking on Tab 2. After removing the overflow css everything is fine. Let me know if I should create an additional issue on Github for that.

[ghost]

Hi Kamil - We'll investigate and get back to you shortly!

[ghost]

Hi @kufelkamil -

I sat down last night and dug into this. I definitely see the issue with the tab overflow but I'm not able to reproduce what you saw with the Select's Popover getting mis-positioned within the extension experience.

I'm wondering if you could try the copy of your code in #2886 and see if you're still seeing it? I definitely want to chase it down – maybe it's browser/version specific or I messed up the repro?

Thanks!

[mdodgelooker]

Hi @kufelkamil the issue with the Select option lists should be resolved if you use height: 100% on your root div, as in this line: https://github.com/looker-open-source/components/pull/2886/files#diff-a31a826540af4b917747467e5b73fca3f4126a6d3e1a97003e2a6007cfd8cf9eR37

The problem lies in how the position for the option list (or any @looker/components popover) is calculated when in the "above" position, which happens automatically if there is more room above the reference element than below.

The popover position logic calculates the distance from the reference element to the bottom of the document and applies that as a negative vertical translate to the popover element. Since the popover's base position is bottom: 0, the negative vertical translate should put it in the right position.

But the issue you're seeing is that, due to the extension iframe, the document is taller than the window, while the popover element's container (see div#modal-root) is the same size as the window. So the calculated position is too large.

Thank you for bringing up this issue! We'll address this incompatibility between the Extension Framework and @looker/components but in the meantime, height: 100% should work.

[kufelkamil]

Hello @mdodgelooker & @lukelooker,

many thanks for taking the time to investigate this!

The solution with height: 100% worked as a charm, and all popovers are being rendered correctly now, including tooltips.

I am using slightly different template, but the idea remains the same:

window.addEventListener('DOMContentLoaded', (_) => {
  const root = document.createElement('div')
  root.style.height = '100%';               // <-- added this
  document.body.appendChild(root)
  ReactDOM.render(<App />, root)
})

[ghost]

Awesome! Glad to here @mdodgelooker's suggestion got you going.

We're going to work to with the Extension framework to smooth out the edges here a bit in the future.

Let us know if we can help out with anything else :)