下拉菜单翻转位置问题。 React-Select + Material-UI Popper

Question

I use the example autocomplete field from the Material-UI lib documentation. ( https://material-ui.com/demos/autocomplete/#react-select )

There is a problem with fliping the menu when it opens at the bottom of the page or the browser's viewport.

Is there a way to fix this problem with Material-UI and react-select? Or do I need to write something custom?

Answer 1

If you are not using a <Menu/> custom component, you can use the menuPlacement="auto" prop of <Select/> , then your problem is solved.

const components = {
  Control,
  // Menu , <-- delete it
  NoOptionsMessage,
  Option,
  Placeholder,
  SingleValue,
  ValueContainer
};

https://github.com/JedWatson/react-select/issues/403

Otherwise you can choose another selector, material-ui provides 2 more differents integration with the <Popper/> component: react-autosuggest and downshift.

https://material-ui.com/demos/autocomplete/

Hope it helps!

Answer 2

i've faced the same problem, for <Select /> component i have used what TomLgls suggest, but for <AsyncSelect /> as a work-around, i used some offset calculations in 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 as well

Answer 3

If you have created customMenu component then in that give className as open-menu-top and write this code for class:

 .menu-open-top { top: auto; bottom: 100%; }

Your CustomMenu maybe look like this:

 const CustomMenu = ({ children, innerProps, innerRef, selectProps }) => { return ( <div ref={innerRef} {...innerProps} className={`rs-menu ${customMenuClass} open-menu-top`} > {Your Logic} </div> ); };