When use scrollable <MentionsInput> and add multiple texts, mention is fixed on the area while scrolling and breaks user interface

[rostyslavDoskochynskiy]

Steps to reproduce:

1. Add text-area with minimal fixed height and limit max height of any value
2. Make this text-area scrollable and add multiline text

<MentionsInput
        type="mentions"
        name="message"
        allowSpaceInQuery
        autoFocus
        placeholder="Write a reply..."
        value={value}
        onChange={handleOnInputChange}
        rendernestederror="false"
        style={mentionsInputStyle}
>

const mentionsInputStyle = {
  control: {
    backgroundColor: '#fff',
    fontSize: 13,
    minHeight: 30,
  },
  '&multiLine': {
    control: {
      minHeight: 30,
      maxHeight: 60,
      width: 220,
    },
    highlighter: {
      padding: '10px 0 9px 5px',
      minHeight: 30,
      maxHeight: 60,
    },
    input: {
      padding: 9,
      minHeight: 30,
      marginRight: 10,
      overflowY: 'scroll',
    },
  },

  '&singleLine': {
    display: 'inline-block',
    width: 180,
    minHeight: 30,

    highlighter: {
      padding: 1,
      border: '2px inset transparent',
    },
    input: {
      padding: 1,
      border: '2px inset',
      minHeight: 30,
    },
  },

  suggestions: {
    list: {
      backgroundColor: 'white',
      border: '1px solid rgba(0,0,0,0.15)',
      fontSize: 16,
    },
    item: {
      padding: '5px 15px',
      borderBottom: '1px solid rgba(0,0,0,0.15)',
      '&focused': {
        backgroundColor: '#cee4e5',
      },
    },
  },
};

Observed behaviour: 3 important bugs

1. Sometimes first mention change a position
2. Second mention stick to the text-area, became fixed on area while scrolling, break his position on the text
3. Sometimes (depend on place of mention and length of it), the same text is visible behind mention, that is not acceptable.

Expected behaviour: I use this library for important feature of my client and expect that I don't get these UI bugs, because it breaks user experience. Also, I am attaching test video with bugs.

https://user-images.githubusercontent.com/28630603/233621795-56db3b7d-1f1f-4271-be99-717bf5c7774b.mov

[levanion]

Have you found a solution to this? I have a similar issue.

[levanion]

Nevermind, found the solution here https://github.com/signavio/react-mentions/blob/master/demo/src/examples/Scrollable.js