Hint/suggestion windows for tagging users in a channels in incorrect place

[kingalg]

Windows with a hint used to tag users on channels moves to the top left corner in some situations.

System: MacOS and Windows

Steps to rectorate:

1. Start tagging an user in a channel until hint window appears.
2. Choose another channel without removing any letters.
3. Come back to the channel from point 1 - hint/suggestion windows is incorrectly on a top left corner of an app.

It should looks like this:

In incorrect state it looks like this:

[holmesworcester]

Lilaro and I tried to fix this, and didn't succeed, but here's some initial research that might be helpful:

• the window location is changing because the anchorEl prop that determines where the popper displays is getting wiped out when you change chats in the sidebar.
• one totally acceptable solution would be for the mention popper to simply not be displayed at all when you switch back to the original chat—at least until the user adds or removes text from the mentioned username, or adds a new mention.
• It seems like setMentionsToSelect([]) that ran when the user switches away would achieve this.
• I'm not sure where to trigger this.
• It seems like the bug is happening in line 96 of MentionPoper.js: zIndex: positionX === 0 || positionY === 0 ? -1 : 0 where when the position is in the top left we're trying to set zIndex to -1. You can inspect the element and see that while the position is (0,0) the zIndex is still set to 0, not -1. I think the issue may be that positionX and position Y are either not set or are nonzero when this conditional gets evaluated, but I'm not sure.

Since there are other bugs (for example, the list of users simply doesn't show sometimes once you start typing, even though there are matches) and since this component has a lot going on and is crucial to the user experience, it might make sense to use a library for this if we haven't already.

This looks like the one to try, if we haven't tried it yet: https://github.com/signavio/react-mentions

[holmesworcester]

Fixed: https://github.com/ZbayApp/ZbayLite/pull/246

But there are still other issues. @vinkabuki @NorbertBodziony do you know if we considered using this library? If not, we should probably try it.

[kingalg]

Issue not fixed.

[holmesworcester]

The PR for this did not make it into the release. This ticket should not have been moved out of 'in progress'

On Tue, May 18, 2021 at 9:58 AM kingalg @.***> wrote:

Issue not fixed.

[image: image] https://user-images.githubusercontent.com/68909168/118664493-ced50380-b7f1-11eb-890d-32fb39b5dda2.png

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ZbayApp/zbay/issues/782#issuecomment-843195709, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABUFLUKWAVMZTDLQG6HSVLTOJW75ANCNFSM43VAKFNA .