react-mentions
react-mentions copied to clipboard
Suggestions overlay incorrectly positioned at right side of mention input
Steps to reproduce:
- Open the basic react-mentions demo page.
- Under scrollable container, type a long input string until the text nears the right side of the container.
- Type "@" to bring up the suggestions overlay.
Expected behaviour:
The mentions overlay appears at the right side of the input, near where the "@" input was placed.
Observed behaviour:
The mentions overlay appears on the far left side of the input:
Workaround:
None at the moment.
I've been able to trace the issue to this commit: https://github.com/signavio/react-mentions/commit/111c89dc62785a64ce14382d70b5c0365fa18d13
In short, suggestionsPosition
used to be passed directly from MentionsInput
into SuggestionsOverlay
and interpreted fully there. Now, it is destructured into the specific position
, left
, and top
members, which disregards the fact that it can also include right
. (https://github.com/signavio/react-mentions/blob/master/src/MentionsInput.js#L711) A pull request fixing the issue is forthcoming.
If there's anything confusing about the steps to reproduce this bug or an objection to the format of the pull request, I'd be happy to try and address them.
+1 please fix this.
I can confirm that this issue was fixed by: https://github.com/signavio/react-mentions/pull/661
Closing this issue and the original PR from 2020 fixing it.