Mentions dropdown shifting on iOS with react Portal

[Tirlipinpin]

Hello there,

I'm currently using react-mentions to implement a messenger-like system and I'm facing a weird issue on iOS whenever I try to use React portals. For some reason, the mentions dropdown shifts when I'm trying to mention a user (this seems to be related to the iOS keyboard).

See screenshots for details:

PC behaviour

iOS behaviour

Here's a link to the code behind: https://codesandbox.io/s/fragrant-leftpad-cx4ci.

Do you know how I may fix this? Is this an issue on my end?

Thanks

[Joroze]

Bump. I see a lot of iOS issues not being reported.

[jmverastigue]

Was able to fix this by forcing overflow:visible on the mentions control, YMMV. Note that I had to remove the suggestionsPortalHost for this to work, hopefully it helps.

.mentions--singleLine{
    overflow: visible !important;
}

[luantrasel]

@jmverastigue suggestion's worked for me, thanks

[Tirlipinpin]

Finally had the occasion to try it out and I couldn't make it work... I tried removing suggestionsPortalHost as mentioned by @jmverastigue however I don't have the .mentions--singleLine class in my code. I seem to be missing something but I just don't get what.