Open suggestions above cursor about react-mentions HOT 11 CLOSED

I would vote against this idea. If you can't display some options below your cursor position I would guess your controls are too close to the window border anyways. See the GitHub comment box for instance. Even if you resize your window the list still opens to the bottom. This way you also keep a consistent user experience. Changing the position to top, would also need to reverse the sorting and also the meaning of the up and down arrows.

from react-mentions.

I think this is a great idea. I am running into this while building a chat feature with the input box at the bottom of the screen. I want something similar to slack's input:

from react-mentions.

Okay, you're maybe right.
What about limiting the displayed suggestions?

from react-mentions.

Can be easily done with CSS or the data source.

from react-mentions.

Also the slack kind of displaying the suggestions is a pure CSS issue.

.suggestions {
    left: 0;
    bottom: 100%;

    width: 90%;
}

and you get this kind of style. The reason why I'm so reluctant to including stuff like this is that our main focus of this component is retrieving mentions for a given set of keywords. We don't ship with CSS because the part of displaying should be totally up to you.

from react-mentions.

But you can navigate only with the up and down arrows, not left and right.

from react-mentions.

This seems no longer works since top style attribute is overwritten.

from react-mentions.

We included an example that shows you how you can do it. It's in the "advanced" example.

from react-mentions.

Thanks, it worked!

from react-mentions.

Also the slack kind of displaying the suggestions is a pure CSS issue.

.suggestions {
    left: 0;
    bottom: 100%;

    width: 90%;
}

and you get this kind of style. The reason why I'm so reluctant to including stuff like this is that our main focus of this component is retrieving mentions for a given set of keywords. We don't ship with CSS because the part of displaying should be totally up to you.

But this code is not working for me .. I want to display the list above the input element ..Any suggestion ?

from react-mentions.

how can I control open/ close of suggestions in react mention? any ideas....please

from react-mentions.