dropdown goes off-screen

[gluck]

Since I upgraded to latest/v2 (from 1.8.4), dropdown menus are painted off screen when the dropdown is near the top of the page.

Can be reproduced by removing layout: 'centered' in storybook (or removing the corresponding class as I do in the GIF below), the first options are no longer visible.

[yuanqing]

Thanks for reporting. Am able to reproduce this. This seems to happen only when the dropdown has no value set when it is clicked

[yuanqing]

@gluck – I rewrote much of the menu sizing/positioning logic and released the fix in 2.1.1-alpha.0

[gluck]

Still getting bad display:

I'm getting negative values for:

• maximumTopOffset: -16
• minimumTopOffset: -1013

Then top gets set to --16px (which doesn't do anything)

I believe proper values for min/max offsets should be:

  const minimumTopOffset = Math.min(
    0,
    rootElementBoundingClientRect.top
  ); // menu should at least be displayed over the dropdown, not below
  const maximumTopOffset = Math.max(
    0,
    rootElementBoundingClientRect.top - VIEWPORT_MARGIN
  ); // menu shouldn't go off screen

(should also ensure non-negative, but still sign invert should be done in number, not in string)

[yuanqing]

Thanks for testing this! The version I shipped in 2.1.1-alpha.0 doesn’t properly account for VIEWPORT_MARGIN. I’ve just managed to figure out the correct algorithm

[bashmish]

Since you are working on the fix for this algorithm, maybe good to report another aspect of this issue (let me know if you prefer making a new issue).

When the component is rendered within a container with overflow: hidden, which is quite a common case for us due to the need to add scrollbars, we get it clipped too. The reproduction in the storybook might look like this (I manually added overflow: hidden on div.root):

I assume it's because of the usage of a combination of position: relative on the dropdown container and position: absolute on the dropdown itself.

To support a use-case with overflow: hidden container this algorithm might require more refactoring.

[yuanqing]

Original bug should be fixed as of 2.1.1 (see Storybook). Created a new issue (#117) for the bug reported by @bashmish

[sholzmayer]

The issue still exists, when you have a separator included and place the menu to the top.

[
  { value: "Text Extender" },
  { separator: true },  // https://github.com/yuanqing/create-figma-plugin/issues/112
  { value: "Hero Texts" },
  { value: "Features" },
  { value: "Pricing Cards" },
]