`menuPlacement="auto"` doesn't work with Async select & `defaultOptions=false`
See original GitHub issueHi,
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.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:8
- Comments:6 (1 by maintainers)
Top Results From Across the Web
React Select auto size width - Stack Overflow
Inline styles did not work for me. I just wrapped the Select component in a div and gave the div the width I...
Read more >API - React Select
A flexible and beautiful Select Input control for ReactJS with multiselect, ... false => The menu stays open ... Async: Text to display...
Read more >react-select/CHANGELOG.md - UNPKG
The CDN for react-select. ... Async Select now re-evaluates defaultOptions on componentWillReceiveProps. Thanks [jesstelford](https://github.com/jesstelford ...
Read more >Help with React Select Menu : r/reactjs - Reddit
I tried menuPlacement = "auto" prop as you can see because from what I've ... do the positioning automatically, but it doesn't seem...
Read more >[Solved]-React Select auto size width-Reactjs
For this to work in react, here is a snippet: <Select style={{width: `${(8*this.state.selectedOption2.length) + 100}px`}} className="select-custom-class" ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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
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!