search

signavio / react-mentions

@mention people in a textarea
https://react-mentions.vercel.app
Other
2.43k stars 568 forks source link

Mentions dropdown shifting on iOS with react Portal #532

Open Tirlipinpin opened 2 years ago

Tirlipinpin commented 2 years ago

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 image

iOS behaviour IMG_2891

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 commented 2 years ago

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

jmverastigue commented 2 years ago

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 commented 2 years ago

@jmverastigue suggestion's worked for me, thanks

Tirlipinpin commented 2 years ago

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.