Comment reply/cancel links work badly when comment form is above the comment list

[smerriman]

If the comment form is below the list of comments, as in default WP themes, reply and cancel links work as follows:

When you click reply, the form moves directly under the comment (page doesn't scroll).
When you click cancel, the form jumps back to original position (page doesn't scroll).

Consider any theme where the comment form is output before the list of comments. (This is a standard request, to make it easier for people to comment without having to scroll through lots of existing comments first).

When you click reply, the form moves from its original position to under the comment, causing the whole page to scroll up a significant amount. The textarea gets focus, meaning if it has scrolled off the top of the screen as is quite likely, the page jumps to ensure it is visible, but you don't see important things like the reply heading, cancel link, or comment label.

When you click cancel, the form reverts back to its original position, jumping the whole page content down significantly, often leaving you in a completely random part of the page.

This is very disorientating from a user perspective. I'm not sure what a workaround is - perhaps some way of saving your vertical position prior to a click and restoring it after a click to make it look like there is no jump.

[mariovalney]

I tested with Twenty Seventeen moving comment_form() to the top of #comments and it worked nice as into bottom. Maybe you are experiencing a theme problem?

[smerriman]

No, the problem happens exactly as described on Twenty Seventeen with no plugins installed. (It has to, by definition of the problem, so I'm guessing you misunderstood how to trigger it).

A video demo is here: ​http://youtu.be/ieqj2p7XPvY?hd=1

I scroll to comment 3 and click reply. Due to the form disappearing, the page jumps up, but due to the textarea focus, jumps so the textarea is right at the top of the screen (not the label, not the login prompt, not the cancel link). I click cancel, and due to the form moving again, I am nowhere near comment 3.

[smerriman]

For reference, this happens in Firefox, which may be important.

[mariovalney]

OK. I can see your problem when using Firefox.

​https://www.useloom.com/share/6d9d1a49053348b9bd855794898306e5

[mariovalney]

Please ignore patch 1... hahaha

[mariovalney]

(Still not sure if changing theme generates adjustments naturally so the patch is not needed, but...)

I added 39958-2.patch​ with two modifications:

1 - Scroll to comment ID after remove form, so we compensate the content added.
2 - Scroll to form position before focus, so I guess Firefox will not jump.

Works nice when the comment form is in the bottom too.