Overflow hidden of the parent container makes the suggestions list cropped

[predictron-cloud]

I use Ionic with react. I put the autosuggest in IonHeader.
he problem is: suggestions list is cropped.

I tried: overflow: visible and even position: fixed and it didn't help. Overflow: visible for all parent have side effects. So I appended react-autosuggest__suggestions-container to the root (e.g. body) with code like this:
let root = document.getElementById('root');
if (elm.parentElement === root) {
return;
}
let top = this.getOffsetTop(elm);
let left = this.getOffsetLeft(elm);
Object.assign(elm.style, {
position: 'absolute',
left: left + 'px',
top: top + 'px',
'z-index': 10000
});
root.appendChild(elm);

It looks good now, but: click on suggestion doesn't work. Please help me. I spent a plenty of time trying to make it work... =)

[Tim Perry]

I don't know anything about Ionic I'm afraid. In general though, I'd strongly recommend against doing manual DOM manipulation like this. Even if it works at first, you'll often find that React updates later conflict with your changes and your whole render crashes completely.

If I understand the problem, your autosuggest is inside a header where the suggestions container can't be shown, so you need it to appear elsewhere, is that right?

I think this is possible. Instead of manually editing the DOM, you can use React's built-in support for doing this kind of thing with portals: https://reactjs.org/docs/portals.html. You get a reference to a DOM element elsewhere where you would like your autosuggest to appear, you pass that reference through to your renderSuggestionsContainer, and then you render the container into a portal using your DOM element, and the suggestions container will appear over there.

You should be able to use that to render your suggestions container anywhere else on the page you would like, without manually moving and editing DOM elements. I don't have a full example I'm afraid, but if you get that working it'd be great if you could share the code here, for others hitting the same issue in future.