Can't use virtualized and renderMenuItem together in the SelectPicker

[hedzerkoolstra]

What version of rsuite are you using?

latest

What version of React are you using?

17.0.0

What version of TypeScript are you using (if any)?

No response

What browser are you using?

Chrome

Describe the Bug

Combining virtualized and renderMenuItem in the SelectPicker doesn't work together. When using just renderMenuItem the custom menuItem renders fine, when adding virtualized prop the height and width of the container get changed and this messes up the menuList component.

Expected Behavior

Be able to use virtualized and renderMenuItem together.

To Reproduce

https://codesandbox.io/s/serene-mahavira-8evty0?file=/index.js

[SevenOutman]

Hi @hedzerkoolstra, when you want to render items with custom height in a virtualized list, you need to specify listProps.itemSize prop that returns the height of each item

<SelectPicker
  data={data}
  renderMenuItem={menuItem}
  virtualized
  listProps={{
    itemSize: (index) => 66 // 50px item height + 8px padding top and bottom
  }}
/>

Ref: react-window docs https://react-window.vercel.app/#/examples/list/variable-size

[hedzerkoolstra]

Thanks for the reply. The height is fixed although my actual project has variable heights so I need a way to determine the height there but I can maybe find a way,

But the width issues is not yet addressed. When using virtualized the menu list get the size of picker again instead of taking the full-width.

[SevenOutman]

But the width issues is not yet addressed. When using virtualized the menu list get the size of picker again instead of taking the full-width.

That's because the style={{ width: 224 }} on SelectPicker. When virtualization is on, the menu's width defaults to the picker toggle's. You can use menuStyle prop to specify a width for the menu.

<SelectPicker
  data={data}
  renderMenuItem={menuItem}
  virtualized
  listProps={{
    itemSize: (index) => 66 // 50px item height + 8px padding top and bottom
  }}
  style={{ width: 224 }}
  menuStyle={{
    width: 424 // 400px item width + 12px padding left and right
  }}
/>

https://codesandbox.io/s/frosty-brown-cqk09c

[hedzerkoolstra]

Thanks for the explanation. So this means virtualized can work, but if you specify the height and width statically. I have dynamic heights and width based on the options I render, is it the not possible to use it?

[SevenOutman]

I have dynamic heights and width based on the options I render, is it the not possible to use it?

listProps.itemSize is actually a function that receives the index of an item, and returns the height of it, you could calculate the heights there.

As of width, if I understand correctly, you only need to set the menu's width to the maximum width among all items, rather than setting each menuitems' widths individually 🤔️.

[hedzerkoolstra]

Yes I could do it with index but then I need to do some extra checks in that function indeed.
For the width I just need to know which item is the largest one and then set width of the menu as a whole to that one.

It's all possible but the CSS worked straight out of the box without virtualized while now I need to do some calculations myself and then set menuItem height and menu width manually. It's more code and more bug prone so I was hoping there would be a way without needing to that. I'll consider the trade-off, thanks!

[SevenOutman]

It's all possible but the CSS worked straight out of the box without virtualized while now I need to do some calculations myself and then set menuItem height and menu width manually.

That's how virtualization is designed and implemented for now. Every item is absolutely positioned and their position is calculated based on other items before them. Thus it has to know the size of each item before they are actually mounted in the document, otherwise you'll get a layout shift.

[hedzerkoolstra]

Ok, thanks for the clarification!