From 89bc9e98ba08af83ea2770194bf1809f0f10d5f5 Mon Sep 17 00:00:00 2001 From: Stefan Sundin Date: Fri, 16 Jul 2021 14:52:57 -0700 Subject: [PATCH 1/3] Fix forceSuggestionsAboveCursor when suggestionsPortalHost is not being used. --- src/MentionsInput.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/MentionsInput.js b/src/MentionsInput.js index e89b48b8..19ced28f 100755 --- a/src/MentionsInput.js +++ b/src/MentionsInput.js @@ -739,13 +739,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 { From b35871b59c9d3a040b9cd3dae19b5a4576b97862 Mon Sep 17 00:00:00 2001 From: Stefan Sundin Date: Fri, 16 Jul 2021 17:30:39 -0700 Subject: [PATCH 2/3] Document forceSuggestionsAboveCursor. --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 1bfe227f..0284a1ae 100755 --- a/README.md +++ b/README.md @@ -64,6 +64,7 @@ The `MentionsInput` supports the following props for configuring the widget: | 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 | Each data source is configured using a `Mention` component, which has the following props: From 2b944441b6f7052b7d892e25b01943afdf0f7df2 Mon Sep 17 00:00:00 2001 From: Stefan Sundin Date: Fri, 16 Jul 2021 17:41:35 -0700 Subject: [PATCH 3/3] Document onKeyDown. --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 0284a1ae..45df65fa 100755 --- a/README.md +++ b/README.md @@ -58,6 +58,7 @@ 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. |