Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: forceSuggestionsAboveCursor when suggestionsPortalHost is not being used #507

Merged
merged 3 commits into from
Jun 30, 2022
Merged

fix: forceSuggestionsAboveCursor when suggestionsPortalHost is not being used #507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
89bc9e9
Fix forceSuggestionsAboveCursor when suggestionsPortalHost is not bei…
stefansundin Jul 16, 2021
b35871b
Document forceSuggestionsAboveCursor.
stefansundin Jul 17, 2021
2b94444
Document onKeyDown.
stefansundin Jul 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,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 |

Each data source is configured using a `Mention` component, which has the following props:
Expand Down
5 changes: 3 additions & 2 deletions src/MentionsInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down