Extra Space in Dropdown Menu of React Select Component on Initial Render

[EjDadivas]

The React Select component is not rendering correctly on the first load. The dropdown menu has extra space at the bottom. This issue only occurs on the initial render

After the initial render it works as expected:

CODE:

<Select
  isMulti
  options={roomValues}
  components={animatedComponents}
  value={productRooms}
  onChange={onChangeRoomSelect}
  getOptionLabel={(option) => option.roomNameObj[activeLanguage.id]}
  className="z-[99] h-max"
/>

Expected Behavior: The dropdown menu should fit the number of items without any extra space.

Actual Behavior: On the first render, the dropdown menu has extra space at the bottom. On subsequent renders, the dropdown menu fits the number of items correctly.

[riskeez]

Firefox 125.0.3 (Windows 11)

Where? https://react-select.com/home How? Just scrolling up and down

[haisumkundi]

following for the resolution

[edwinro]

We also see this problem in the use case described by riskeez . Scrolling up & down renders random white spaces on top & bottom. Scrolling faster and longer lists seems to increase the problem.

Firefox 126.0.1 (Windows 11)