Automatically reposition InlineAutocomplete suggestions depending on available space

[iansan5653]

InlineAutocomplete currently naively always places suggestions below the trigger character. This can cause the list to overflow the bottom edge of the screen.

The simple (and only slightly less naive) solution is to just put the suggestions on top if there's not enough space below. This is not an attempt to solve for every situation - the list can still overflow to the left, right, or top (if there's not enough vertical space above). And it won't automatically reposition on scroll. But it still solves for the vast majority of cases at very minimal performance cost.

Here's a Storybook demo that places the textarea at the bottom of the screen.

Screen.Recording.2023-08-09.at.4.03.38.PM.mov

[changeset-bot]

🦋 Changeset detected

Latest commit: b5c2beb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	103.81 KB (+0.15% 🔺)
dist/browser.umd.js	104.37 KB (+0.14% 🔺)

[paxos]

This is great 👍

I think it would be even better if we could specify an anchor point on top of that. In the demo video you posted, you see the position twitching around if there is only one auto complete item (that does it).
By specifying an anchor direction, we could avoid that (e.g. things would float always above the cursor).

[siddharthkp]

The changes are scoped inside drafts/InlineAutocomplete

I trust your judgement with the changes :)

[siddharthkp]

(Not blocking suggestion) Should we lock to the suggestion if it's given? For example, If we start at "above", stick to above even when the list becomes smaller and there is now enough space below. Layout shift when filtering could be a bad user experience.

[paxos]

👍 IMHO it should be sticky

[iansan5653]

I think that works for if the list becomes shorter while it's open, but not if the list becomes larger. If we try to distinguish between those cases, the logic becomes pretty challenging and I don't know if it's worth it considering how uncommon that will actually be in practice.

I tested in VSCode just now and the suggestions list can flip as you type. I've personally never noticed that before, so I think that this is probably not a very common case.