fix: forceSuggestionsAboveCursor when suggestionsPortalHost is not be…

…ing used (#507) * Fix forceSuggestionsAboveCursor when suggestionsPortalHost is not being used. * Document forceSuggestionsAboveCursor. * Document onKeyDown.
signavio · Jun 30, 2022 · c48b4ea · c48b4ea · vercel · Jun 30, 2022
1 parent 5cf96f0
commit c48b4ea
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -55,12 +55,14 @@ The `MentionsInput` supports the following props for configuring the widget:
 | --------------------------- | ------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------- |
 | value                       | string                                                  | `''`           | The value containing markup for mentions                                               |
 | onChange                    | function (event, newValue, newPlainTextValue, mentions) | empty function | A callback that is invoked when the user changes the value in the mentions input       |
+| onKeyDown                   | function (event)                                        | empty function | A callback that is invoked when the user presses a key in the mentions input           |
 | singleLine                  | boolean                                                 | `false`        | Renders a single line text input instead of a textarea, if set to `true`               |
 | onBlur                      | function (event, clickedSuggestion)                     | empty function | Passes `true` as second argument if the blur was caused by a mousedown on a suggestion |
 | allowSpaceInQuery           | boolean                                                 | false          | Keep suggestions open even if the user separates keywords with spaces.                 |
 | suggestionsPortalHost       | DOM Element                                             | undefined      | Render suggestions into the DOM in the supplied host element.                          |
 | inputRef                    | React ref                                               | undefined      | Accepts a React ref to forward to the underlying input element                         |
 | allowSuggestionsAboveCursor | boolean                                                 | false          | Renders the SuggestionList above the cursor if there is not enough space below         |
+| forceSuggestionsAboveCursor | boolean                                                 | false          | Forces the SuggestionList to be rendered above the cursor                              |
 | a11ySuggestionsListLabel    | string                                                  | `''`           | This label would be exposed to screen readers when suggestion popup appears            |
 | customSuggestionsContainer  | function(children)                                      | empty function | Allows customizing the container of the suggestions                                    |
 

diff --git a/src/MentionsInput.js b/src/MentionsInput.js
@@ -760,13 +760,14 @@ class MentionsInput extends React.Component {
       // move the list up above the caret if it's getting cut off by the bottom of the window, provided that the list height
       // is small enough to NOT cover up the caret
       if (
-        allowSuggestionsAboveCursor &&
+        (allowSuggestionsAboveCursor &&
         viewportRelative.top -
           highlighter.scrollTop +
           suggestions.offsetHeight >
           viewportHeight &&
         suggestions.offsetHeight <
-          caretOffsetParentRect.top - caretHeight - highlighter.scrollTop
+          caretOffsetParentRect.top - caretHeight - highlighter.scrollTop) ||
+        forceSuggestionsAboveCursor
       ) {
         position.top = top - suggestions.offsetHeight - caretHeight
       } else {