Better positioning system

[FezVrasta]

Right now react-select positions the dropdowns right below the originating input element.
This is problematic in situations when there's not enough space on the bottom of the page or of its scrollable container because the page will be enlarged to make the dropdown fit.

If you used a positioning engine like react-popper the dropdown could be positioned where there's more available space. The library is very lightweight and supports all your use cases.

[blakedietz]

As I'm currently gathering requirements for a project this was one of the few requirements that this module failed. This seems like a nice feature add.

[Grsmto]

FYI in v2 you can now do menuPlacement="auto". Not sure why this isn't default tho.

[jossmac]

@gwyneplaine might be time to make the move, perhaps in our next major?

CC @JedWatson

Refs

• react-popper
• popper

Ideas

More modular approach, less root-level props:

import Select from 'react-select';
import useMenuPosition from 'react-select/hooks/useMenuPosition'; // smaller default bundle

const CONFIG = {
  placement: 'bottom-start',
  positionFixed: true,
}

export const MySelect = props => {
 const { components, styles } = useMenuPosition(CONFIG); // merge fns?

 return (
   <Select
     {...props}
     components={components(props.components)}
     styles={styles(props.styles)}
   />
 );
}