auto show: use textarea as the anchor element if available #2411
+45
−32
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Reopens #2407
If in the viewport we have a textarea,
preserveScroll
will use it as the anchor element to determine if something has moved.If multiple textareas are present in the viewport, the focused one is preferred, otherwise the first in the tree will be picked as anchor.
Jitteriness
Also removes the
MutationObserver
used to do calculations on the most updated DOM, as it was causing page blocks. It was a precautionary measure that got obsolete by using two RAFs for the textarea anchor support.Scroll preservation now also bails when there's some form of scrolling happening, avoiding jittery scrolling.
We now preserve scroll even if we're at the top of the page, this allows the active textbox/center ref to stay in focus even on short posts.
TODO
Explore better performance
Screenshots
Textarea is the preferred anchor element, with fallback
textarea2.mp4
incredibly fumbled on the compression settings
Additional Context
This required an additional layer of
requestAnimationFrame
: some browsers may have their own anonymous content, like text extensions and such, deferring textarea/input renders.It still fallbacks to picking a ref at the middle of the viewport in absence of textareas
Checklist
Are your changes backward compatible? Please answer below:
For example, a change is not backward compatible if you removed a GraphQL field or dropped a database column.
Yes
On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below:
7, Brave, Safari, Chrome
For frontend changes: Tested on mobile, light and dark mode? Please answer below:
n/a
Did you introduce any new environment variables? If so, call them out explicitly here:
n/a