[Bug]: Dropdown virtualized menu - wrong height calculation

[Andrew-Zakharov]

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

https://github.com/mondaycom/monday-ui-react-core/assets/108681710/a592982e-553d-41c6-b900-5c3a2b0fbd13

[Hossein-Mirazimi]

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.

[rivka-ungar]

This has been fixed in the new Dropdown component