Expanding of New Issue Textarea Causes Scroll Jumping #3994

I can't reproduce this on Firefox with RGH 21.1.9, what browser are you using?

Ah sorry, forgot to add the browser info - added it now above. Chrome latest + macOS latest.

In case there is no logic in Refined GitHub itself, wonder if this is related to the Scroll Anchoring behavior that Chrome has that is supposed to keep the page from shifting:

https://blog.chromium.org/2017/04/scroll-anchoring-for-web-developers.html

This feels like an error in GitHub’s own logic for bulled point lists. fit-textarea does not affect the cursor and I don’t remember any other feature that handles the enter key.

bulled point lists

Hmm... do you think that it still applies though when it's not a bullet list? I was not in a bullet point list there...

bulled point lists

Hmm... do you think that it still applies though when it's not a bullet list? I was not in a bullet point list there...

I can confirm this has nothing to do with the actual content of the textarea. As OP said this is probably caused by a scrolling behavior specific to Chrome.

It’s not super clear from the gif because of the repeating content, but due to how fit-textarea works, it might actually be its fault.

I thought that only the cursor was changing position (index) in the field, but actually the whole page scrolls, right?

Normally fit-textarea takes care of that and always tries to restore the scroll afterwards.

Just try disabling the feature in Refined GitHub to ensure its the culprit. GitHub actually has a similar but limited feature included, so double check separately by completely disabling the extension.

Just try disabling the feature in Refined GitHub to ensure its the culprit.

I did this before submitting the issue - GitHub itself does not have the "endlessly expanding" textareas. They even have a max-height to prevent resizing of the textarea.

If I disable the extension and then manually disable the max-height and expand the textarea horizontally, it doesn't appear to happen...

But not sure if it would maybe be intermittent...

Just try disabling the feature in Refined GitHub to ensure its the culprit.

I did this before submitting the issue

So that means you’re sure that fit-textarea is the culprit here. I’ll have to look into it

It seems like it, but I guess it's not 100% certain that it's not something with Chrome that needs to be worked around separately...

I can replicate it in Chrome, without Refined GitHub:

I'm pretty sure it's what my first comment said 😁 because it only happens for some content, like the numbered lists present in the new issue template.

Jokes aside, no worries, and thanks for opening a detailed issue. By the way now I'm @fregante, not @bfred-it 😁

Hmm... then how is it happening with the first example (which is not in a list)? Is it detecting that the cursor is inside a comment?

And, if this is an issue with GitHub itself, would it be possible to fix this in Refined GitHub? That would make the extension even more useful...

Hmm... then how is it happening with the first example (which is not in a list)?

Probably they see the hyphen and are trying to handle it as a list. There are other situations where it seems the enter key is mishandled. For example if I select this paragraph and press enter the text is not deleted like you’d expect.

And, if this is an issue with GitHub itself, would it be possible to fix this in Refined GitHub? That would make the extension even more useful...

Fixing this would require us to rewrite the whole “press enter to continue list” logic which I’d rather leave to GitHub. I suggest reporting both of these issues to them.

I suggest reporting both of these issues to them.

When I first read this a few days ago, I agreed with this.

But I was about to report just now, and thinking about it more, it will probably be a wontfix for them, because it only happens when a user is using the Refined GitHub extension (the textarea does not get a super large height applied ever in normal GitHub).

So I guess since Refined GitHub won't do this change since it's potentially a bit bigger, and I don't think GitHub is going to change their code for an extension, I guess this will just stay as a "known issue".

it only happens when a user is using the Refined GitHub extension

As I said when I closed the issue, it doesn’t. Look at the last gif I posted, there’s no Refined GitHub. The mouse movement highlights the lack of checkmark that RG adds next to the repository name and the existence of the Insights tab, that RG removes.

This is 100% unrelated to this extension.

As I said when I closed the issue, it doesn’t. Look at the last gif I posted, there’s no Refined GitHub.

Ah, I must have missed / forgotten that detail, sorry. Then maybe it does make sense to still report it. Although the UX isn't as bad when the textarea is smaller...

Ok, at first I was unable to reproduce this without Refined GitHub enabled, but then I was able to narrow down the behavior a bit:

1. As I demonstrate at the start of the video, the bug does not appear right away. I hit enter at the end of some lines, and no scroll position change can be observed.
2. To reliably trigger the buggy scroll jumping behavior, you need to add a list to the issue text (I only tested a numbered list). Add one list item with some text after it, and then hit enter to create a second empty list item. Click to the end of the first line with something in it, scroll so that the list is flush with the bottom of the textarea, and then hit enter. This will create a new line item and trigger the buggy scroll behavior.
3. From this point on, until you delete the list items, the buggy scroll behavior can be observed when hitting enter at the end of any line with content in it (also just on ordinary paragraphs outside of list items)
4. To disable the buggy behavior again (I show this at the end of the video), delete the numbered list, and TWICE go to the end of some line and hit enter. The first time, it will show the buggy scroll behavior, but after the second time it will go back to normal.

Here's a video of the behavior: https://www.youtube.com/watch?v=3FrtTNYXMvI

I'll submit a support request to GitHub.