react-mentions icon indicating copy to clipboard operation
react-mentions copied to clipboard

Suggestions overlay incorrectly positioned at right side of mention input

Open lucioperca opened this issue 4 years ago • 2 comments

Steps to reproduce:

  1. Open the basic react-mentions demo page.
  2. Under scrollable container, type a long input string until the text nears the right side of the container.
  3. 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:

demo-right-positioning

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.

lucioperca avatar Aug 07 '20 01:08 lucioperca

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.

lucioperca avatar Sep 18 '20 01:09 lucioperca

+1 please fix this.

PA55ION avatar Aug 04 '21 22:08 PA55ION

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.

lucioperca avatar Jul 07 '23 01:07 lucioperca