How to make autosuggest suggestions overflow the dialog container?

Question

How to make autosuggest suggestions be position above the dialog and not in the dialog? To avoid dialog content scrolling

Sandbox example https://codesandbox.io/embed/adoring-bogdan-pkou8

Answer 1

Add max-height to the Paper component that renders the suggestions.

renderSuggestionsContainer={options => (
    <Paper  style={{'maxHeight':100, overflow:'auto'}} {...options.containerProps} square>
         {options.children}
    </Paper>
)}

Answer 2

I don't know the libraries that you are using, but the outer dialog div element with class name MuiPaper-root MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-rounded needs an overflow: visible style. And the MuiDialogContent-root div element needs overflow-y: unset . For me this does the trick in the code sandbox.

To explain this behaviour: the dialog crops of everything that vertically overflows his boundaries and creates a scrollbar for that. Because the autosuggest component is DOM-wise inside the dialog component and positioned absolute it is cut off when getting bigger than the dialog. Telling the dialog to not crop it's content and not hide overflowing content by scrolling, lets the autosuggest component overflow correctly. But it also means you can't scroll inside the dialog anymore.

You should let the autosuggest component let its root element append to the body and position itself with the input field as pivot point. That way you don't have to manipulate the overflows, because the autosuggest is DOM-wise "above" the dialog component.