Why does comment_reply_link launch the reply form at the wrong spot on the comment section?

Question

I have this custom extended Walker_Comments class:

class Custom_Comment_Walker extends Walker_Comment {
    var $tree_type = 'comment';
    var $db_fields = array( 'parent' => 'comment_parent', 'id' => 'comment_ID' );

    function __construct() { ?>
        <ul class="comments-list col-md-12">

    <?php }

    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $GLOBALS['comment_depth'] = $depth + 1;
        ?>

        <ul class="child-comments comments-list col-md-12">

    <?php }

    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $GLOBALS['comment_depth'] = $depth + 1; ?>

        </ul>

    <?php }

    function start_el( &$output, $comment, $depth = 0, $args = array(), $id = 0 ) {
        $depth++;
        $GLOBALS['comment_depth'] = $depth;
        $GLOBALS['comment'] = $comment;

        $tag = 'li';
        $add_below = 'comment';
        ?>

        <li <?php comment_class( $depth == '1' ? 'parent col-md-12' : 'child col-md-11') ?> id="comment-<?php comment_ID() ?>" itemprop="comment" itemscope itemtype="http://schema.org/Comment">
            <div class="comment-wrapper col-md-12">
                <?php echo get_avatar( $comment, 65, '[default gravatar URL]', 'Author’s gravatar' ); ?>
                <div class="info">
                    <div class="comment-meta" role="complementary">
                        <h2 class="comment-author">
                            <a class="comment-author-link" href="<?php comment_author_url(); ?>" itemprop="author"><?php comment_author(); ?></a>
                        </h2>
                        <time class="comment-time" datetime="<?php comment_date('Y-m-d') ?>T<?php comment_time('H:iP') ?>" itemprop="datePublished"><?php comment_date('jS F Y') ?>, <a href="#comment-<?php comment_ID() ?>" itemprop="url"><?php comment_time() ?></a></time>
                        <?php edit_comment_link('<p class="comment-meta-item">Edit this comment</p>','',''); ?>
                        <?php if ($comment->comment_approved == '0') : ?>
                        <p class="comment-time">Your comment is awaiting moderation.</p>
                        <?php endif; ?>
                    </div>
                    <div class="comment-content" itemprop="text">
                        <?php comment_text() ?>
                        <?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ) ?>
                    </div>
                </div>
            </div>

    <?php }

    function end_el(&$output, $comment, $depth = 0, $args = array() ) { ?>

        </li>

    <?php }

    function __destruct() { ?>

        </ul>

    <?php }
}

Which is laid out like this, after rendering:

When I hit the reply button, I'd like for my form to go under the comment that launched it, instead, the form goes right under where the tree starts, like this (gif image):

https://i.imgur.com/QQij8a4.gifv

I assume this has to do with not passing the correct parameters to

comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) )

How would I go about achieving this?

Answer 1

Because that's done in javascript, and you have to enqueue that javascript for it to work, as stated in the docs:

If JavaScript is enabled and the comment-reply.js JavaScript is loaded the link moves the comment form to just below the comment.

https://codex.wordpress.org/Function_Reference/comment_reply_link

e.g.

function wpse289875_enqueue_comments_reply() {
    if ( is_singular() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'comment_form_before', 'wpse289875_enqueue_comments_reply' );

Also take note of https://codex.wordpress.org/Migrating_Plugins_and_Themes_to_2.7/Enhanced_Comment_Display#Javascript_Comment_Functionality

Edit I suspect the fundamental problem is that the code doesn't use the same format, and so the needed IDs aren't present.

For example, the comment reply uses an ID to figure out which comment to put the reply form under, but your HTML has no IDs, see this line in wp-includes/class-walker-comment.php:

<div id="div-comment-<?php comment_ID(); ?>" class="comment-body">

No equivalent exists in your code. At least these IDs need to be present from the looks of it:

• comment-x
• div-comment-x

With the latter being nested inside the former, and x being the ID of that comment.

Note that at any point you can switch to one of the default themes in a test environment such as a local dev env to get the default working HTML, or by looking at the comment walker class in core at wp-includes/class-walker-comment.php

For reference, you can also override the moveform function used as defined here:

https://github.com/WordPress/WordPress/blob/master/wp-includes/js/comment-reply.js#L213

It's added to the main window object, so you can replace it with your own copy with extra debugging output, or different mechanics