I have the following example that I’m trying to fix in my project. So page-wrapper’s height is supposed to emulate a page that has some content on it, hence the height CSS property. I placed select-container in the middle intentionally to have space both above and below it. If I open the menu for example when I land on the page, so no scroll in yet, instead of opening it up top, ReactSelect is opening it at the bottom and scrolling me down to it. I tried menuPlacement = “auto” prop as you can see because from what I’ve seen in the documentation, it should do the positioning automatically, but it doesn’t seem to work.
My Component “` import ReactSelect from “react-select”;
const options = [ { label: “No 1”, value: “test_1” }, { label: “No 2”, value: “test_2” }, { label: “No 3”, value: “test_3” }, { label: “No 4”, value: “test_4” } ];
export default function App() { return ( <div className=”page-wrapper”> <div className=”select-container”> <ReactSelect options={options} menuPlacement=”auto” /> </div> </div> ); } “`
CSS “` * { margin: 0; padding: 0; box-sizing: border-box; }
.page-wrapper { min-height: 180vh; width: 100%; background-color: #f8f8f8; display: flex; align-items: center; }
.select-container { width: 90%; margin: 0 auto; } “`
I have a Sandbox code here if needed. https://codesandbox.io/s/keen-kare-9ke19
submitted by /u/Aggressive-Toe9807
[link] [comments]