Changing the position of the React mention suggestion List

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;
}

.mentions__suggestions{
  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(e.target.value)} >
                <Mention
                  trigger="@"
                  data={tagUserList}
                />
              </MentionsInput>

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

Answer

You can use forceSuggestionsAboveCursor={true}

<MentionsInput
          value={value}
          onChange={onChange}
          style={defaultStyle}
          placeholder={"Mention people using '@'"}
          suggestionsPortalHost={container}
          forceSuggestionsAboveCursor={true}
        >
    <Mention data={data} onAdd={onAdd} style={defaultMentionStyle} />
 </MentionsInput>

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.

Advertisement

Answer