Changing the position of the React mention suggestion List

Tags: , ,

I am using react-mentions in my project for mentioning users.. The problem is My comment input is at bottom of the page.. The react-mentions show the suggestion when we type @ in the bottom of the cursor. I want this list to be above the cursor…Can anyone help me?

I tried Editing the css, but my methods doesn’t work. This is the Css i am using

.mentions {
  margin: 1em 0;

.mentions--singleLine .mentions__control {
  display: inline-block;
  /* width: 130px; */
.mentions--singleLine .mentions__highlighter {
  /* padding: 1px; */
  border: 2px inset transparent;
.mentions--singleLine .mentions__input {
  /* padding: 1px; */
  border: 2px inset;

.mentions--multiLine .mentions__control {
  font-family: monospace;
  /* font-size: 14pt; */
.mentions--multiLine .mentions__highlighter {
  border: 1px solid transparent;
  /* padding: 5px; */
  /* min-height: 63px; */
.mentions--multiLine .mentions__input {
  border: 1px solid silver;
  /* padding: 9px; */
  outline: 0;

  left: 0;
  bottom: 100%;
  width: 90%;

.mentions__suggestions__list {
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.15);
  left: 0;
  bottom: 100%;
  width: 90%;
  /* font-size: 10pt; */

.mentions__suggestions__item {
  padding: 5px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);

.mentions__suggestions__item--focused {
  background-color: #cee4e5;

.mentions__mention {
  position: relative;
  z-index: 1;
  color: blue;
  text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white,
    -1px -1px 1px white;
  text-decoration: underline;
  pointer-events: none;

This is the js code

<MentionsInput className="mentions" value={newComment} onChange={e => setNewComment(} >

But the output is still like the same..The list is showing below the cursor Please help me to solve the problem


You can use forceSuggestionsAboveCursor={true}

          placeholder={"Mention people using '@'"}
    <Mention data={data} onAdd={onAdd} style={defaultMentionStyle} />

There is a demo page that shows how it works. This code example can be found in their GitHub here

It’s the middle one from BottomGuard’s section.

You can also use allowSuggestionsAboveCursor={true}, which will use bottom only if there’s space.

Source: stackoverflow