Mention text and formatting desynchronize

[roancoetzee]

Steps to reproduce:

1. Go to https://react-mentions.now.sh/
2. Add some lorem ipsum text to any of the multiline textareas (Multiple Trigger Patterns, Scrollable Container etc)
3. Add a few mentions after the text

The next step is dependent on how much text you added and where the mention is located within that text

4. Change the browser resolution by resizing it until the you see the desync happen.

Expected behaviour:

• Mention text and format should always be in synch

Observed behaviour:

• At certain textarea/resolution widths the mention and the format for that mention desync. See attached image.

Workaround: N/A

[khamiltonuk]

@roancoetzee, thanks for the issue, I was wondering how do change the browser resolution? I am trying to replicate the issue

• do you mean resizing the browser?
• changing the browser orientation by rotating a device?
• dragging the browser window between two monitors or different resolutions

[roancoetzee]

@khamiltonuk Yes resizing the browser. I'll update the issue.

[jsheffers]

Agreed. Here is a screenshot from the examples page:

Also, in my own app, I'm having shifting issues as well.

[yurikelvin]

I had the same issue but in a different scenario. When you add some text like lorem ipsum text and in the middle of the text you put a mention and delete/add a few characters before the mention until the break line the mention text and formatting desynchronize. In my case the shifting issues it's based on pipe of the keyboard (put pipe right across the break line and add a mention too).

Resolution tested: 1920x1080

Sorry about my English, hope that I helped.

[theo-m]

Maybe I can offer help: we've struggled on this too with an overlay like the one in this file to have the mentions show up like links. Our solution was to set

text-rendering: geometricPrecision;

in the text-area, classname: .mentions--multiLine .mentions__input in the stylesheet, which effectively helped Chrome render the two texts (from the overlay div and the text area) match perfectly. To note, this issue was not present in Firefox or Safari, we believe it's Chrome optimizing rendering and getting it wrong, so setting it to geometricPrecision does the job by telling it to do things exactly.

[AlexBHarley]

I'm also having this issue. The more newlines I add the further the highlighting is out of sync

[basyusuf]

Anybody find a solution?

[Seoudi]

Yes as attached below the styling for the mentions__highlighter and mentions__input must be identical I think this should solve the problem and you can reset default styling in them maybe it affects one of them only for more details check this article I created it handles everything from the begining https://medium.com/@aly.essam.seoudi/simple-react-guide-to-implement-chat-comment-input-component-react-mentions-emoji-mart-a48a4d8c4fad

[Seoudi]

Yes as attached below the styling for the mentions__highlighter and mentions__input must be identical I think this should solve the problem and you can reset default styling in them maybe it affects one of them only for more details check this article I created it handles everything from the begining https://medium.com/@aly.essam.seoudi/simple-react-guide-to-implement-chat-comment-input-component-react-mentions-emoji-mart-a48a4d8c4fad

[vinrei]

Anyone found a solution to this one? It is causing issues for me. Our text input has a relatively a narrow width which seems to make it worse as the text is spread over more lines.

[omeedrj]

I tried a lot of different things and noticed that the amount of shifting is very different depending on what font you're using.

Here's the font in https://github.com/signavio/react-mentions/blob/master/demo/src/examples/example.module.css, which I noticed had zero issues with shifting for me (I only tested with a small amount of text).

.mentions--multiLine .mentions__control {
  font-family: monospace;
  font-size: 14pt;
}

Workaround for me: I was able to get it working for my font by setting font-weight for the highlighter css.

I'm using font-family: "Avenir" and font-size: 14px.

Depending on what font you're using though, this may or may not work. Good luck! Hopefully this helps 🤞

.mentions--multiLine .mentions__highlighter {
  font-weight: 400;
}

[omeedrj]

Follow up here, depending on what your word-break is set to, I also found that if I had overflow-y: scroll; set on on multiLine, I needed to make sure it was also set on the highlighter, as that was causing word wrapping to be problematic in some cases and also causing the overlayed highlighter to be misaligned.

[Floriferous]

This is what I get with 0 styles in Google Chrome. The only thing I added was a red text color for highlights and a monospace font to try and reduce variability.

The solution for me was to set line-height: initial; on .mentions__control, as our global line-height was different and apparently applied differently to the text and to the mentions overlay.

[MRamanenkau]

How does it work? Well, it has two layers of text - the visible and the transparent one with the visible highlight bar. These texts and the linebreaks should match so the bar lies under the mention text. But it's not matching because the underlying transparent text has an extra invisible 1px border. The solution is to find highlighter element and disable this border.

&__highlighter {
  border: 0 !important;
}