React-select: `menuPlacement="auto"` doesn't work with Async select & `defaultOptions=false`

[simonflk]

Hi,

It seems to me that an async select with menuPlacement="auto" is always placing the menu _below_ when the async options are loaded and displayed.

Here's a small demo of the problem:

https://codesandbox.io/s/jz1p9x7895

if I set defaultOptions, it works ok. Unfortunately I can't use this in my app because the initial list is too big, and I want to defer loading options until the user has typed 3 or more characters.

For now, I will try a workaround - to override the <Menu/> component, and invoke Element.scrollIntoViewIfNeeded when it renders new options. If that doesn't work, I will try to manually switch between menuPlacement=top/bottom based on my own calculations.

[andypearson]

I've just run into this problem. @simonflk did you ever find a suitable workaround and if so, would you mind sharing?

[vincentbello]

Hi @simonflk and @andypearson, were either of you able to find a workaround for this issue, short of hardcoding the placement? Thanks.

[Lehakos]

any news about this problem?

[simonflk]

I've just lived with it, unfortunately. given that there's over 1000 open issues, I think it's unlikely there's going to be any movement here unless someone feels sufficiently moved to figure out a solution & contribute it back.

Myself, I'm more likely to migrate at some point to something like downshift or reach ui

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!

[aMahdaoui]

@simonflk , @Lehakos
i've faced the same problem, as a work-arond i add some offset calculations to my component :

const rootHeight =  document.getElementById('root').offsetHeight ;
const selectElement = document.getElementById('async_select_container_id');
const selectOffsetBottom=  selectElement.offsetHeight  + selectElement.offsetTop;
...
<AsyncSelect 
  {...listProps}
  menuPlacement={
      rootHeight - selectOffsetBottom > 210 ? 'auto' : 'top'  // react-select menu height is 200px in my case
  }
/>

i hope it helps