WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 21 months ago

#39958 new defect (bug)

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

Reported by: smerriman Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Comments Keywords: has-patch 2nd-opinion needs-refresh dev-feedback
Focuses: Cc:
PR Number:

Description

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.

Attachments (2)

39958.patch (6.4 KB) - added by mariovalney 2 years ago.
39958-2.patch (743 bytes) - added by mariovalney 2 years ago.
Please ignore patch 1... hahaha

Download all attachments as: .zip

Change History (12)

#1 @aranwer104
3 years ago

  • Keywords needs-patch added

#2 @swissspidy
3 years ago

  • Version trunk deleted

#3 @mariovalney
2 years ago

  • Focuses ui accessibility added
  • Keywords ux-feedback ui-feedback added

#4 @mariovalney
2 years ago

  • Focuses ui accessibility removed
  • Keywords reporter-feedback added; needs-patch ux-feedback ui-feedback removed

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?

#5 @smerriman
2 years ago

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.

Last edited 2 years ago by smerriman (previous) (diff)

#6 @smerriman
2 years ago

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

#7 @mariovalney
2 years ago

  • Keywords needs-patch added; reporter-feedback removed

OK. I can see your problem when using Firefox.

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

@mariovalney
2 years ago

@mariovalney
2 years ago

Please ignore patch 1... hahaha

#8 @mariovalney
2 years ago

  • Keywords has-patch added; needs-patch removed

(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.

Last edited 2 years ago by mariovalney (previous) (diff)

#9 @mariovalney
23 months ago

  • Keywords 2nd-opinion added

#10 @mariovalney
21 months ago

  • Keywords needs-refresh dev-feedback added
Note: See TracTickets for help on using tickets.