Add optional bottom guard for rendering suggestion list

[hyan7]

Adds an optional prop allowSuggestionsAboveCursor that if set to true, the suggestion list will render above the cursor if there is not enough space underneath.

Repro steps:
I came across this problem because the text input with react-mentions for my app is positioned in the bottom-right corner of the screen. Using the suggestions portal, if the user attempted to @ mention something, the suggestions list will open up underneath the cursor, making the list unusable since it would be cut off by the bottom of the screen. I tried to position it absolutely like the advanced example, but then it would get cut off by the right side of the screen if I tried to @ mention multiple things on the same line since the text input is on the bottom-right and the absolute positioning will make the right guard useless.

I added the allowSuggestionsAboveCursor prop and code that checks the prop and the spacing around the component to see if there is enough space to render the suggestion list underneath the cursor (the default way), and if there is not enough space underneath but enough space above, the list will render above the cursor (by adjusting the top) given the prop is set to true.

The PR resolves the whole issue since I added checks for both the suggestionsPortal mode and the default mode.
I followed closely the coding convention of the file.
I did not add tests since I could not find any examples in the existing tests that tests rendering positions.

The changes should not affect other parts of the code base since the added prop makes it opt-in.
I did not add any extra test files or set up.
Please test that the rendering behavior is as expected.

[codecov-io]

Codecov Report

Merging #339 into master will decrease coverage by 0.02%.
The diff coverage is 87.5%.

@@            Coverage Diff            @@
##           master    #339      +/-   ##
=========================================
- Coverage   76.82%   76.8%   -0.03%     
=========================================
  Files          22      22              
  Lines         630     638       +8     
  Branches       95      98       +3     
=========================================
+ Hits          484     490       +6     
- Misses        145     147       +2     
  Partials        1       1

Impacted Files	Coverage Δ
src/MentionsInput.js	67.34% <87.5%> (+0.18%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b077fa0...98e037a. Read the comment docs.

[hyan7]

@frontendphil @jfschwarz it seems like there's some kind of permission issue with the CI. I don't think it's failing because of my changes.

[activescott]

This looks good to me and I contributed the suggestionsPortalHost feature.
@cosom, @DJTB, @nummi, @adityatandon007, @boywithsilverwings: This is similar to #273 that you all expressed interest in but resolves the concerns raised there. Can you please look this over and see if this meets your needs? We need this and hoping you can review and suggest changes or improvements to help get this ready to merge when @jfschwarz has a chance.

[DJTB]

I no longer have an active project that this would be used in - but looking over the changes it seems like it would work as desired 👍

[activescott]

@jfschwarz Any chance we can get some feedback from you to get this on track to be merged?

[activescott]

@hyan7 Looks like master has been updated since this PR was submitted and you'll need to merge the latest changes from master into your branch to resolve the merge conflict. Let me know if you would like a hand.

[vercel]

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

Latest deployment for this branch: https://react-mentions-git-fork-hyan7-add-bottom-guard.wolf-pack.now.sh

[activescott]

FWIW I did some checking to confirm and getting the offsetHeight/Width of a component isn't possible in enzyme/jsdom per enzymejs/enzyme#1525. Then jsdom/jsdom#135 is the relevant issue in jsdom (used by enzyme) where offsetWidth/Height, etc. are not yet supported. So I don't think there is an obvious way to add a unit test with this since enzyme doesn't support. Would require cypress.io, or puppeteer something.

[activescott]

@jfschwarz @frontendphil It would be great if you could review this PR and give guidance on any changes you deem necessary in order to get it merged.

[jfschwarz]

Thank you for this! Could you please add an example for this to our demo page (src/demo)?

[hyan7]

@jfschwarz Thanks for looking it over. I added an example. The qa-publish-release is not passing again, but it doesn't seem like it's related to what I changed.

[activescott]

Ran demo locally and it worked.

[activescott]

@jfschwarz @frontendphil Demo page added by @hyan7 and I added an approval. Please reply and tell us how we can help keep this PR moving forward.

[activescott]

@jfschwarz @frontendphil Anything we can do to keep this PR moving forward?

[tphan18]

All jobs are passed so could we please merge this PR?

[activescott]

@jfschwarz @frontendphil Let me know if there is anything else that needs done to merge this feature. Happy to incorporate your feedback if you have it.

[jfschwarz]

Thank you for the reminder. I had different priorities the last week, but this looks good now and we can finally merge it.

My apologies thank you, @hyan7