mondaycom/vibe

[Bug]: Dropdown virtualized menu - wrong height calculation

Andrew-Zakharov opened this issue · 1 comments

Andrew-Zakharov commented

Vibe version

2.102.0

Describe the bug

Menu height of virtualized Dropdown is slightly greater than non-virtualized one.
That results in extra bottom padding ("No options" text is no longer centered vertically).

Expected behavior

Menu height of virtualized Dropdown properly calculates to not to produce extra paddings.

Steps to reproduce

  1. Create Dropdown
  2. Set some reasonable width for it
  3. Set isVirtualized property to true

Reproduction example link

https://codesandbox.io/p/sandbox/frosty-wildflower-4j8fwl?file=%2Fsrc%2FApp.js%3A12%2C24

System Info

No response

Additional context, Screenshots

Screen.Recording.2024-04-11.at.12.54.08.mp4
Hossein-Mirazimi commented

Hi

I've looked into this issue and I believe the problem is coming from the combination of the react-select and react-windowed-select packages.

When the isVirtualized prop is set, the WindowedMenuList component from the react-windowed-select package is used. It seems that this component handles the menu's rendering and layout, which includes how the "No options" section is displayed. Unfortunately, we don't have direct control over how the padding and height are calculated within this component.

This could explain the extra space and the misalignment of the "No options" text when using the virtualized dropdown.